第一步、index.html
vue是单页界面,主窗口通过index.html渲染,默认的http://localhost:8080会去加载index.html,当执行npm run dev后,main.js会被添加到index.html中
第二步、main.js
main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件,会用App.vue替换index.html中的id='app'的div
第三步、App.vue
App.vue是我们的主组件,所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件;App.vue中添加<router-view/>,用来承载路由组件
第四步、index.js
vue路由会去监听url变化,通过路由配合找到相应组件,加载到<router-view/>上,实现页面切换
注:本文系本人对vue初学的理解,可能会存在误解,如有错误的地方还望指正