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

时间:2024-04-07 09:51:01

先介绍下vue项目的文件目录结构(vue-cli2版本),如下图:
vue项目启动后文件加载过程总结大家都知道,所有的前端项目在启动时,后首先去加载最外层的index.html页面,也就是这个
vue项目启动后文件加载过程总结
注意到index.html中有一个id为app的div元素,这个div就是一个挂载点,以后在views文件夹下的所有页面都会挂载到这个这个div中。接下来程序会找使用了这个id为app的文件,找到main.js如下图:
vue项目启动后文件加载过程总结
程序找到main.js后发现里面创建有一个vue实例,包含有el属性#app,也就是index.html中的id为app的div元素,接着加载模板template属性下的App.vue页面:
vue项目启动后文件加载过程总结
在App.vue中通过router-view标签来动态渲染路由中定义的组件,既然router-view中放什么东西是由路由决定的,所以,程序又会到router文件夹下去查看有无对路由的定义,找到router下的index.js:
vue项目启动后文件加载过程总结
在router中可以看出,在路径“/”下,即首页会去加载路径为"@/views/iviewLayout”的模块,找到这个模块:
vue项目启动后文件加载过程总结
在浏览器中加载出来,如下图:
vue项目启动后文件加载过程总结通过运行结果可以看到,加载出来的即为iviewLayout模块下的页面内容。
总结一下:项目运行时,程序会先去找到入口文件index.html,在index.html中找到其实例需要挂载的位置,然后找到main.js中实例创建的地方,去加载组件中的模板,然后通过模板中的router-view,得知需要去查找路由,找到后加载对应的模板呈现到浏览器中。