????????通過vue-cli構(gòu)建了一個(gè)項(xiàng)目，那么讓我們來(lái)了解一下整個(gè)項(xiàng)目是如何執(zhí)行的。
? ? ? ? 安裝vue-cli的過程我就省略了，從啟動(dòng)服務(wù)開始吧！通過指令$npm start serve啟動(dòng)了服務(wù)，在瀏覽器輸入http://localhost:8080/，我們可以看到vue已經(jīng)跑起來(lái)了，運(yùn)行界面如下：
?那么，是怎么來(lái)到這個(gè)界面的呢？下面我來(lái)講解一下。
? ? ? （1）先看一下項(xiàng)目的目錄結(jié)構(gòu)，如下圖：
（2）當(dāng)我們?cè)跒g覽器輸入http://localhost:8080/，瀏覽器首先找到入口文件main.js，
我們可以看到main.js下面創(chuàng)建了一個(gè)實(shí)例，
newVue({
? ?router,
? ?store,
????render:h=>h(App)
}).$mount('#app')
（3）該實(shí)例掛載在一個(gè)id為app的dom節(jié)點(diǎn)上，這時(shí)便找到/public/index.html，因?yàn)檫@里只有這個(gè)文件夾下有html文件，并且里面有個(gè)id為app的dom節(jié)點(diǎn)，如下圖：
（4）此時(shí)的<div id="app"></div>被App.vue里面的template模板替換，即如下：
（5）當(dāng)解析到第五行的時(shí)候，頁(yè)面中的兩個(gè)超鏈接Home和About已經(jīng)被渲染出來(lái)了，接下來(lái)往下走，到了<router-view/>，這時(shí)便走到了/router/index.js，看一下這個(gè)文件里面的內(nèi)容：
可以看到，index.js文件引用了兩個(gè)組件，分別為Home和About，<router-view/>就是把router里面引用的組件都渲染到頁(yè)面上。
? ? ? （6）先看一下Home.vue組件（因?yàn)槟J(rèn)顯示這個(gè)頁(yè)面，點(diǎn)擊About才跳轉(zhuǎn)到對(duì)應(yīng)的頁(yè)面上顯示），如下圖：
（7）因?yàn)檎{(diào)用了HelloWorld組件，所以要去找到組件，并把組件內(nèi)容渲染到頁(yè)面上，組件內(nèi)容如下圖：
直到這里，我們看到的頁(yè)面數(shù)據(jù)已經(jīng)渲染完成了，還剩下About頁(yè)面，點(diǎn)擊后渲染
? ? ? ? （8）當(dāng)我們點(diǎn)擊About的時(shí)候，便跳轉(zhuǎn)到該頁(yè)面，效果如下：
About.vue的內(nèi)容如下，渲染效果如期一樣：
（9）至此，新構(gòu)建的項(xiàng)目就已經(jīng)全部執(zhí)行完畢，這就是整個(gè)項(xiàng)目初始化時(shí)的流程。
