我很喜歡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是基於[email protected]進行配置的版本，而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