(转)vue项目启动后文件加载过程总结

先介绍下vue项目的文件目录结构（vue-cli2版本），如下图：
大家都知道，所有的前端项目在启动时，后首先去加载最外层的index.html页面，也就是这个

注意到index.html中有一个id为app的div元素，这个div就是一个挂载点，以后在views文件夹下的所有页面都会挂载到这个这个div中。接下来程序会找使用了这个id为app的文件，找到main.js如下图：

程序找到main.js后发现里面创建有一个vue实例，包含有el属性#app，也就是index.html中的id为app的div元素，接着加载模板template属性下的App.vue页面：

在App.vue中通过router-view标签来动态渲染路由中定义的组件，既然router-view中放什么东西是由路由决定的，所以，程序又会到router文件夹下去查看有无对路由的定义，找到router下的index.js：

在router中可以看出，在路径“/”下，即首页会去加载路径为"@/views/iviewLayout”的模块，找到这个模块：

在浏览器中加载出来，如下图：
通过运行结果可以看到，加载出来的即为iviewLayout模块下的页面内容。
总结一下：项目运行时，程序会先去找到入口文件index.html，在index.html中找到其实例需要挂载的位置，然后找到main.js中实例创建的地方，去加载组件中的模板，然后通过模板中的router-view，得知需要去查找路由，找到后加载对应的模板呈现到浏览器中。

转自：https://www.csdn.net/gather_2f/OtTaYgzsMTcyLWJsb2cO0O0O.html