Vue項(xiàng)目創(chuàng)建完成后，使用WebStorm打開(kāi)項(xiàng)目，項(xiàng)目目錄如下：

build文件夾，用來(lái)存放項(xiàng)目構(gòu)建腳本

config中存放項(xiàng)目的一些基本配置信息，最常用的就是端口轉(zhuǎn)發(fā)

node_modules這個(gè)目錄存放的是項(xiàng)目的所有依賴，即npminstall命令下載下來(lái)的文件

src這個(gè)目錄下存放項(xiàng)目的源碼，即開(kāi)發(fā)者寫的代碼放在這里

static用來(lái)存放靜態(tài)資源

index.html則是項(xiàng)目的首頁(yè)，入口頁(yè)，也是整個(gè)項(xiàng)目唯一的HTML頁(yè)面

package.json中定義了項(xiàng)目的所有依賴，包括開(kāi)發(fā)時(shí)依賴和發(fā)布時(shí)依賴

對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，以后99.99%的工作都是在src中完成的，src中的文件目錄如下：

assets目錄用來(lái)存放資產(chǎn)文件

components目錄用來(lái)存放組件（一些可復(fù)用，非獨(dú)立的頁(yè)面），當(dāng)然開(kāi)發(fā)者也可以在components中直接創(chuàng)建完整頁(yè)面。

推薦在components中存放組件，另外單獨(dú)新建一個(gè)page文件夾，專門用來(lái)放完整頁(yè)面。

router目錄中，存放了路由的js文件

App.vue是一個(gè)Vue組件，也是項(xiàng)目的第一個(gè)Vue組件

main.js相當(dāng)于Java中的main方法，是整個(gè)項(xiàng)目的入口js

main.js內(nèi)容如下：

在main.js中，首先導(dǎo)入Vue對(duì)象

導(dǎo)入App.vue，并且命名為App

導(dǎo)入router，注意，由于router目錄下路由默認(rèn)文件名為index.js，因此可以省略

所有東西都導(dǎo)入成功后，創(chuàng)建一個(gè)Vue對(duì)象，設(shè)置要被Vue處理的節(jié)點(diǎn)是'#app'，'#app'指提前在index.html文件中定義的一個(gè)div

將router設(shè)置到vue對(duì)象中，這里是一個(gè)簡(jiǎn)化的寫法，完整的寫法是router:router，如果key/value一模一樣，則可以簡(jiǎn)寫。

聲明一個(gè)組件App，App這個(gè)組件在一開(kāi)始已經(jīng)導(dǎo)入到項(xiàng)目中了，但是直接導(dǎo)入的組件無(wú)法直接使用，必須要聲明。

template中定義了頁(yè)面模板，即將App組件中的內(nèi)容渲染到'#app'這個(gè)div中。

因此，可以猜測(cè)，項(xiàng)目啟動(dòng)成功后，看到的頁(yè)面效果定義在App.vue中

App.vue是一個(gè)vue組件，這個(gè)組件中包含三部分內(nèi)容：1.頁(yè)面模板（template）；2.頁(yè)面腳本（script）；3.頁(yè)面樣式（style）

頁(yè)面模板中，定義了頁(yè)面的HTML元素，這里定義了兩個(gè)，一個(gè)是一張圖片，另一個(gè)則是一個(gè)router-view

頁(yè)面腳本主要用來(lái)實(shí)現(xiàn)當(dāng)前頁(yè)面數(shù)據(jù)初始化、事件處理等等操作

頁(yè)面樣式就是針對(duì)template中HTML元素的頁(yè)面美化操作

需要額外解釋的是，router-view，這個(gè)指展示路由頁(yè)面的位置，可以簡(jiǎn)單理解為一個(gè)占位符，這個(gè)占位符展示的內(nèi)容將根據(jù)當(dāng)前具體的URL地址來(lái)定。具體展示的內(nèi)容，要參考路由表，即router/index.js文件，該文件如下：

這個(gè)文件中，首先導(dǎo)入了Vue對(duì)象、Router對(duì)象以及HelloWorld組件，

創(chuàng)建一個(gè)Router對(duì)象，并定義路由表

這里定義的路由表，path為/，對(duì)應(yīng)的組件為HelloWorld，即瀏覽器地址為/時(shí)，在router-view位置顯示HelloWorld組件