老师，能否解释下 main.js App.vue index.html是什么吗？

Question

对vue cli 搭建的webpack项目目录很不清楚，望老师解惑

Answer 1

Sam 2019-04-05 21:29:19

你好，脚手架的用途主要是让开发者从前端工程化（如webpack配置）中解放出来，专注于业务开发，Vue CLI 3.0更加极致，采用了零配置模式，也就是说无需提供任何配置就能启动项目。如果你想深入了解脚手架的工作原理，这是一个比较大的命题，这里我简单说一下：

1、index.html：入口文件，由于我们的应用采用SPA（单页面应用，也就是整个应用只有一个html）架构，所以index.html就是我们整个应用的入口，其他vue文件会经过webpack打包生成js、css等资源文件，最终注入到index.html中

2、main.js：整个应用的js入口，最终会被注入index.html

3、App.vue：整个Vue应用的入口，main.js中使用了App.vue，Vue实例化时会传入App.vue，最终渲染出整个页面

以上仅仅是简单介绍，如果要深入理解脚手架的原理还需要了解Node.js常用api、Vue.js源码以及大量前端工程化工具如Webpack等，然后再系统阅读Vue CLI的源码