第一步乌逐、index.html
vue是單頁(yè)界面竭讳,主窗口通過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/>,用來承載路由組件
第四步吨悍、index.js
vue路由會(huì)去監(jiān)聽url變化扫茅,通過路由配合找到相應(yīng)組件,加載到<router-view/>上育瓜,實(shí)現(xiàn)頁(yè)面切換
注:本文系本人對(duì)vue初學(xué)的理解葫隙,可能會(huì)存在誤解,如有錯(cuò)誤的地方還望指正