第1个回答 2022-06-11
下面说下Vue项目启动的加载逻辑：
首先前端项目默认入口都是index.html
这里有个DIV的id为app，这里是vue的挂载点，后续views中的 .vue文件都会挂载在这里。
程序运行index.html后会寻找用到app的文件，即main.js
这里创建了一个vue实例，挂载了#app，也就是index.html中的id为app的div元素，接着加载App.vue中的页面
打开App.vue文件，查看配置有router-link和router-view
router-link 定义点击后导航到哪个路径下
router-view 会动态的把对应的组件内容渲染到router-view中
上面router-view中加载的内容有路由决定，于是再到路由文件查看此路由定义
路由配置文件中如图所示两种方式都可以实现。
接下来加载的就是具体的功能模块了
例如在Home.vue这个模块中又引入了HelloWorld.vue公共组件模块
关联了该组件，也会加载进去
项目运行起来后，会先去找入口文件index.html，在index.html中找到其实例需要挂载的位置，然后找到main.js中实例创建的地方，去加载组件中的模板，然后通过模板中的router-view，得知需要去查找路由，找到后加载对应的模板，如果模板中引用了公共的模板再加载公共模板进来，最后把处理后的这些呈现到浏览器中。