Vue 項目創建完成后，使用 Web Storm 打開項目，項目目錄如下：
-
build 文件夾，用來存放項目構建腳本
-
config 中存放項目的一些基本配置信息，最常用的就是端口轉發
-
node_modules 這個目錄存放的是項目的所有依賴，即 npm install 命令下載下來的文件
-
src 這個目錄下存放項目的源碼，即開發者寫的代碼放在這里
-
static 用來存放靜態資源
-
index.html 則是項目的首頁，入口頁，也是整個項目唯一的HTML頁面
-
package.json 中定義了項目的所有依賴，包括開發時依賴和發布時依賴
對於開發者來說，以后 99.99% 的工作都是在 src 中完成的，src 中的文件目錄如下：
-
assets 目錄用來存放資產文件
-
components 目錄用來存放組件（一些可復用，非獨立的頁面），當然開發者也可以在 components 中直接創建完整頁面。
-
推薦在 components 中存放組件，另外單獨新建一個 page 文件夾，專門用來放完整頁面。
-
router 目錄中，存放了路由的js文件
-
App.vue 是一個Vue組件，也是項目的第一個Vue組件
-
main.js相當於Java中的main方法，是整個項目的入口js
main.js 內容如下：
-
在main.js 中，首先導入 Vue 對象
-
導入 App.vue ，並且命名為 App
-
導入router，注意，由於router目錄下路由默認文件名為 index.js ，因此可以省略
-
所有東西都導入成功后，創建一個Vue對象，設置要被Vue處理的節點是 '#app'，'#app' 指提前在index.html 文件中定義的一個div
-
將 router 設置到 vue 對象中，這里是一個簡化的寫法，完整的寫法是 router:router，如果 key/value 一模一樣，則可以簡寫。
-
聲明一個組件 App，App 這個組件在一開始已經導入到項目中了，但是直接導入的組件無法直接使用，必須要聲明。
-
template 中定義了頁面模板，即將 App 組件中的內容渲染到 '#app' 這個div 中。
因此，可以猜測，項目啟動成功后，看到的頁面效果定義在 App.vue 中
-
App.vue 是一個vue組件，這個組件中包含三部分內容：1.頁面模板（template）；2.頁面腳本（script）；3.頁面樣式（style）
-
頁面模板中，定義了頁面的 HTML 元素，這里定義了兩個，一個是一張圖片，另一個則是一個 router-view
-
頁面腳本主要用來實現當前頁面數據初始化、事件處理等等操作
-
頁面樣式就是針對 template 中 HTML 元素的頁面美化操作
需要額外解釋的是，router-view，這個指展示路由頁面的位置，可以簡單理解為一個占位符，這個占位符展示的內容將根據當前具體的 URL 地址來定。具體展示的內容，要參考路由表，即 router/index.js 文件，該文件如下：
-
這個文件中，首先導入了Vue對象、Router對象以及 HelloWorld 組件，
-
創建一個Router對象，並定義路由表
-
這里定義的路由表，path為
/，對應的組件為 HelloWorld，即瀏覽器地址為/時，在router-view位置顯示 HelloWorld 組件