腳手架vue-cli系列一：安裝與規範
我很喜歡Vue的一個重要原因就是因為它的vue-cli，這個工具可以讓一個簡單的命令列工具來幫助我快速地構建一個足以支撐實際專案開發的Vue環境，並不像Angular和React那樣要在Yoman上找適合自己的第三方腳手架。vue-cli的存在將專案環境的初始化工作與複雜度降到了最低。
1.安裝
安裝vue-cli
vue-cli是一個npm的安裝包，我們希望它能在本機的任意目錄下建立專案，那麼就得將它安裝到node.js的全域性執行目錄下
$ npm i vue-cli -g
安裝成功後，我們就可以使用vue-cli來初始化Vue專案了。
使用vue-cli初始化專案
vue-cli是一個很簡單的指令，先開啟它的幫助檔案看看它的具體用法：
用法: vue <命令> [選項] 命令: init從指定模板中生成一個新的專案 list列出所有的可用的官方模板 help [cmd]顯示所有[cmd]（命令）的幫助 選項: -h, --help輸出用法資訊 -V, --version輸出版本號
建立專案
接下來先看看這個vue-cli如何為我們建立專案。建立專案使用的是init命令，它會為我們自動建立一個新的資料夾，並將所需的檔案、目錄、配置和依賴都準備好，具體做法如下：
$ vue init webpack my-project
init命令執行後會出一系列的互動式問題讓我們選擇，執行結果如下所示。
完成以後直接按提示進入專案，安裝npm的依賴包後就可以開始開發。
2.規範
目錄的結構與檔案的組織應在開發前就進行約定，對於多人協作式專案，目錄的使用與檔案的命名都顯得尤為重要。
具體約定如下：
（1）公共元件、指令、過濾器（多於三個檔案以上的引用）將分別存放於src目錄下的
●components；
●directives；
●filters。
（2）以使用場景命名Vue的頁面檔案。
（3）當頁面檔案具有私有元件、指令和過濾器時，則建立一個與頁面同名的目錄，頁面檔案更名為index.vue，將頁面與相關的依賴檔案放在一起。
（4）目錄由全小寫的名詞、動名詞或分詞命名，由兩個以上的片語成，以“-”進行分隔。
（5）Vue檔案統一以大駝峰命名法命名，僅入口檔案index.vue採用小寫。
（6）測試檔案一律以測試目標檔名.spec.js命名。
（7）資原始檔一律以小寫字元命名，由兩個以上的片語成，以“-”進行分隔。
例如：
src ├── README.md ├── assets// 全域性資源目錄 │├── images// 圖片 │├── less// less 樣式表 │├── css// CSS 樣式表 │└── fonts// 自定義字型檔案 ├── components// 公共元件目錄 │├── ImageInput.vue │├── Slider.vue │└── ... ├── directives.js// 公共指令 ├── filters.js// 公共過濾器 ├── login// 場景：登入 │├── index.vue// 入口檔案 │├── LoginForm.vue// 登入場景私有表單元件 │└── SocialLogin.vue ├── cart │├── index.vue │├── ItemList.vue │└── CheckoutForm.vue ├── Discover.vue// 場景入口檔案 ├── App.vue// 預設程式入口 └── main.js