我很喜歡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項目了。
2.使用vue-cli初始化項目
vue-cli是一個很簡單的指令，先打開它的幫助文件看看它的具體用法：
用法: vue <命令> [選項]
命令:
init 從指定模板中生成一個新的項目
list 列出所有的可用的官方模板
help [cmd] 顯示所有[cmd]（命令）的幫助
選項:
-h, --help 輸出用法信息
-V, --version 輸出版本號
先用list指令來看看有哪些官方模板可用：
$ vue list
這些官方模板存在的意義在於提供強大的項目構建能力，用戶可以盡可能快地進行開發。然而能否真正地發揮作用還在於用戶如何組織代碼和使用的其他庫。
將list指令的輸出結果翻譯一下，就可以清楚地了解這些官方模板應用於哪些使用場景：
● browserify——擁有高級功能的Browserify + vueify用於正式開發；
● browserify-simple——擁有基礎功能的Browserify + vueify用於快速原型開發；
● pwa ——基於webpack模板的VUE CLI 漸進式網頁應用模板
● simple——適用於單頁應用開發的最小化配置；
● webpack——擁有高級功能的webpack + vue-loader用於正式開發；
● webpack-simple——擁有基礎功能的webpack + vue-loader用於快速原型開發。
browserify的模板做得比較簡陋，就算是用於正式開發還是會有些不足，配置的是Karma+Jasmine的單元測試框架，而browserify屬於比較老舊的構建工具，估計官方提供這兩個模板頁是出於對經常使用browserify的開發人員提供一個熟悉環境的考慮。到了正式的項目開發時，我們還是會走上webpack的道路。
所以我建議初學者可以跳過browserify的兩個模板，直接使用webpack的兩個模板。首先webpack-simple正如其名，配置了最簡單的可直接支持ES6的Vue.js編譯環境，可以應對那些要求時間短，結構相對簡單的小型應用。如果對所有環境工具都非常熟悉，開發者也可以由這個模板入手，為項目底板定制更適應自身開發要求的環境。
其次，webpack模板是一個非常贊的腳手架，將其分析透徹之后，就會知道Vue的官方開發團隊在其中花了很大的功夫，將上文所敘述的開發、測試與生產環境做了非常完善的配置，從最大程度上簡化了由於工具而引入項目的復雜度，也降低了開發人員對工具的學習成本，這個模板也將是本書中講述的重點。
3.創建項目
接下來先看看這個vue-cli如何為我們創建項目。創建項目使用的是init命令，它會為我們自動創建一個新的文件夾，並將所需的文件、目錄、配置和依賴都准備好，具體做法如下：
$ vue init webpack my-project
init命令執行后會出一系列的交互式問題讓我們選擇，運行結果如下所示。
完成以后直接按提示進入項目，安裝npm的依賴包后就可以開始開發。
4.深入vue-cli的工程模板
vue-cli提供的腳手架只是一個最基礎的，也可以說是Vue團隊認為的工程結構的一種最佳實踐。對於初學者或者以前曾從事AngularJS/React開發的用戶來說，可能對開發環境有自已習慣性用法和熟悉的工具，但我建議用Vue來開發的話還是先按照官方推薦的來做，待我們掌握了Vue官方推薦的環境配置后再按照實際情況進行相應的調整，這樣會少走一些彎路，節省不少時間。
我們下面要討論的工程結構都是圍繞webpack-simple與webpack展開的，browserify也只是在這兩個模板的基礎上移植的一個版本，所以就不過多地贅述。
webpack和webpack-simple這兩個模板從文件結構上看幾乎是一致的，只是一個是簡化版，另一個是完全版。其實不然，webpack-simple是基於Webpack@2.1.0-beta.25進行配置的版本，而webpack模板則是基於Webpack ^1.3.2配置的。這兩個版本暫時是互相不兼容的，而且使用的依賴包的版本也不一樣，所以不要將webpack模板創建的項目文件結構復制到webpack-simple中進行直接的取代升級，而是需要將node_modules內安裝的所有的依賴包刪除，然后重新安裝才有可能遷移成功，這一點是需要注意的。
5.webpack-simple模板
以下為webpack-simple模板構建的項目的工程目錄結構：
├── README.md
├── index.html
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ └── main.js
└── webpack.config.js
6.規范
webpack-simple只配置了Babel和Vue的編譯器，其他的一無所有。這個模板值得一提的就是src目錄，所有的Vue代碼源程序都放置在這個目錄中，五個模板構建出來的這個src目錄都是一樣的，只是在webpack模板中多了components目錄用於存放公用組件。這個目錄的結構與文件的組織應在開發前就進行約定，對於多人協作式項目，目錄的使用與文件的命名都顯得尤為重要。
具體約定如下：
（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