腳手架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項目了。

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