运行vue时，文件的执行顺序

在使用工具构建vue工程时，往往会看到很多的js文件和配置文件，下面来理一理他们的执行顺序：

使用vue-cli 构建

- 1、package.json
　　在执行npm run dev时，会在当前目录寻找package.json文件，此文件包含了项目
　　的名称版本、项目依赖等相关信息。

- 2、webpack.dev.conf.js
　　启动命令后，会加载build/webpack.dev.conf.js,配置并启动webpack-dev-server

- 3、config/*.js
　　作为模块引入，webpack.dev.conf.js 中引入了很多模块的内容，
　　其中就包括 config 目录下服务器环境的配置文件。

- 4、config/index.js
　　在 index.js 文件中包含服务器 host 和 port 以及入口文件的相关配置，
　　默认启动端口是8080，这里可以进行修改。

- 5、index.html
　　提供一个div给vue挂载。
　　
- 6、main.js
　　引入了vue、app和router模块，创建了一个vue对象并把app.vue模板的内容
　　挂载到index.html的id为app的div标签下，并绑定了一个路由配置。

- 7、App.vue
　　上面 main.js 把 App.vue 模板的内容，放置在了 index.html 的 div 标签下面。
　　查看 App.vue 的内容我们看到，这个页面的内容由一个 logo 和一个待放置内容的
　　router-view，router-view 的内容将由 router 配置决定。

- 8、index.js
　　查看 route 目录下的 index.js，我们发现这里配置了一个路由， 在访问路径 /
　　的时候， 会把 HelloWorld 模板的内容放置到上面的 router-view中。

- 9、helloworld.vue
　　要显示的内容

- 10、页面组成
　　页面关系组成是 index.html 包含 App.vue，App.vue 包含 HelloWorld.vue 。

参考：https://www.cnblogs.com/ppy-web/p/14041316.html

---

上文讨论的是vue-cli构建项目时的执行顺序，那么如果使用的是@vue/cli呢，config文件夹都没有不存在了。
（在vue-cli为2.x版本时vue的脚手架，@vue/cli为3.x版本的脚手架）

@vue/cli构建

可以通过以上的顺序转换并简化一下, 即可得出：

- 1、package.json
- 2、@vue-cli脚手架隐藏的内部的webpack.config.js
- 3、vue.config.js
- 4、index.html
- 5、main.js
- 6、App.vue
....