前端Vue初始页面流程梳理

入口是main.js

该文件创建了应用实例，并挂载id为app。

Vue.config.productionTip=false：取消生产环境提示

从import可以看出创建的应用实例，是App，而这个App，就是App.vue页面。

所以接下来来到了App.vue页面。

该页面中用<router-link>定义了两个链接，to属性值就是链接地址。

<router-view>即是将链接页面渲染出来的地方。

链接中的地址是指到哪个页面中去？这个答案就在index.js中（src/router/index.js），这个js中存放的是我们项目的路由相关信息。

routes中就定义了路径及对应的页面，其中path属性值是链接地址，component属性值是对应页面组件。

值得提一嘴的是19行的写法，这是一种懒加载写法，只有组件用到，才会去导入。

从上图3行代码和19行代码，可以看出两个地址对应的两个页面就是HomeView.vue页面和AboutView.vue页面，其中HomeView.vue页面又引入了HelloWorld.vue页面作为其子组件。这两个页面就是App.vue中导航到的两个页面，<router-view>处渲染的就是它们。