第一步、index.html

vue是單頁(yè)界面，主窗口通過(guò)index.html渲染，默認(rèn)的http://localhost:8080會(huì)去加載index.html，當(dāng)執(zhí)行npm run dev后，main.js會(huì)被添加到index.html中

第二步、main.js

main.js是我們的入口文件，主要作用是初始化vue實(shí)例，并引入所需要的插件，會(huì)用App.vue替換index.html中的id='app'的div

第三步、App.vue

App.vue是我們的主組件，所有頁(yè)面都是在App.vue下進(jìn)行切換的。其實(shí)你也可以理解為所有的路由也是App.vue的子組件。所以我將router標(biāo)示為App.vue的子組件；App.vue中添加<router-view/>，用來(lái)承載路由組件

第四步、index.js

vue路由會(huì)去監(jiān)聽(tīng)url變化，通過(guò)路由配合找到相應(yīng)組件，加載到<router-view/>上，實(shí)現(xiàn)頁(yè)面切換

注：本文系本人對(duì)vue初學(xué)的理解，可能會(huì)存在誤解，如有錯(cuò)誤的地方還望指正