Vue 專案結構介紹
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 元件