vue-cli簡介（中文翻譯）

vue-cli是一個簡單的vuejs腳手架命令行工具。

安裝

準備：Node.js(>=4.x,推薦6.x版本),npm版本3以上和Git。

$npm install -g vue-cli

使用

$vue init <template-name> <project-name>

        Example:

$vue init webpack my-project

上面的命令會從vuejs-templates/webpack拉取模板並顯示提示信息，最後在./my-project/.下面生成項目。

官方模板

vue官方模板的目標是提供一個opinionated(有態度的)、功能齊備的工具化安裝開發環境以方便使用者們迅速的開始本身的應用邏輯編程。可是，他們在使用者怎樣設計應用代碼結構以及像在vue.js中使用哪些庫又是un-opinionated（寬容的）。

PS:這裏簡單介紹如下什麼叫opinionated software，什麼叫un-opinionated software。一個軟件若是是opinionated，那麼它會/引導要求你按照它的規則作事，不容許超出框架。而若是一個軟件是un-opinionated，那麼它自身並無太多的規則限制，容許你制定本身的框架規則。

全部的官方項目模板都被保存在vuejs-templates organization中。若是有一個新的模板被加入其中，你將能夠經過 vue init <template-name> <project-name> 來使用這個模板。你也能夠執行 vue list 來查看全部可用的官方模板。

當前可用的模板包括：

• webpack - 安裝一個帶有熱加載，靜態檢測，測試&css提取的全功能Webpack + vue-loader
• webpack-simple - 安裝一個用於快速原型設計的簡易版webpack + vue-loader
• browserify - 安裝一個帶有熱加載，靜態檢測&單元測試的全功能 Browserify + vueify
• browserify-simple - 安裝一個用於快速原型設計的簡易版browserify + vueify
• pwa - 安裝一個vue-cli版的基於webpack模板的pwa模板
• simple - 安裝一個在單頁面中可使用的最簡vue

自定義模板

官方模板並不能使每一個人都滿意。你能夠輕易的建立一個官方模板的分支並在vue-cli中使用它：

vue init username/repo my-project

 username/repo 就是你的分支在gitHub上的速記標識。

存儲庫速記標識的執行會經過第三方組件download-git-repo。因此你也可使用 bitbucket:username/repo 來從BitBucket代碼庫中獲取模板（download-git-repo同時支持連接bitBucket和github）並使用 username/repo#branch命令選取版本分支。

若是你想要從一個私人庫中下載資源，你可使用--clone標識，這樣cli就會在內部使用git clone命令從而確保你的SSH keys被使用。

本地模板

除了可使用GitHub代碼庫，你也可使用一個在你本地文件系統中的模板：

vue init ~/fs/path/to-custom-template my-project

從頭開始寫自定義的模板

• 一個模板倉庫必須包含一個模板目錄用來保存模板文件。

• 一個模板倉庫應該爲包含一個meta.js/meta.json文件做爲元文件。它必須包含如下的字段：

1. prompts: 用來保存用戶選項信息;
2. filters: 用來對須要渲染的文件進行條件過濾
3. metalsmith: 用來在鏈中增長自定義的metalsmith插件
4. completeMessage: 模板建立以後顯示給用戶的消息。能夠在這裏放一些自定義的說明。
5. complete: 替代completeMessage,你也能夠在模板建立以後運行一個函數來執行全部工做.

prompts

元數據文件中的prompts字段是一個對象，包含了對用戶的詢問信息。對於每一條詢問信息，key是變量名value值是inquirer.js 的一個question對象。舉例來講

{
  "prompts": {
    "name": {
      "type": "string",
      "required": true,
      "message": "Project name"
    }
  }
}

當全部的詢問結束，全部在模板中的文件就會用以前詢問獲得的結果經過HandleBars從新渲染。

條件prompts

若是想要某一條詢問提示在必定條件下顯示，能夠添加一個when字段。這個字段的value應該關聯以前的詢問的數據。舉例來講

{
  "prompts": {
    "lint": {
      "type": "confirm",
      "message": "Use a linter?"
    },
    "lintConfig": {
      "when": "lint",
      "type": "list",
      "message": "Pick a lint config",
      "choices": [
        "standard",
        "airbnb",
        "none"
      ]
    }
  }
}

只有在用戶對"lint"詢問提示回答了Yes， lintConfig這條提示纔會被觸發。

預登記Handlebars Helpers

if_eq和unless_eq是兩個最經常使用的HandleBars Helpers，使用方法以下

{{#if_eq lintConfig "airbnb"}};{{/if_eq}}

自定義Handlebars Helpers

你可能會但願在元文件中自行註冊並使用一些額外的HandleBars Helpers特性。對象的key就是helper名：

module.exports = {
  helpers: {
    lowercase: str => str.toLowerCase()
  }
}

註冊後, 能夠想下面這樣使用:

{{ lowercase name }}

文件過濾

元數據文件中的filters字段應該是一個包含文件過濾規則的對象哈希。其中每一個條目的key都應該是用於進行glob最小正則匹配的字符串，其對應的value應當是prompt獲取到的結果字符串。如

{
  "filters": {
    "test/**/*": "needTests"
  }
}

只有用戶對needTests這個詢問回答Yes，test下面的文件纔會生成 。

注意進行最小匹配的dot選項被配置成了true，默認dotfiles也會被匹配到。

dotfiles： 以.號開頭的文件（通常指配置文件）。

跳過渲染

元文件中的skipInterpolation字段應該使用glob進行最小正則匹配。被匹配到的文件會跳過渲染，舉例以下：

{
    "skipInterpolation": "src/**/*.vue"
}

Metalsmith

vue-cli 使用metalsmith來生成工程.

你能夠定製vue-cli建立的metalsmith builder來註冊自定義的插件

{
  "metalsmith": function (metalsmith, opts, helpers) {
    function customMetalsmithPlugin (files, metalsmith, done) {
      // Implement something really custom here.
      done(null, files)
    }
    
    metalsmith.use(customMetalsmithPlugin)
  }
}

 若是你想要在questions被提出前處理metalsmith，那麼你須要使用一個以"bofore"做爲key的對象。

{
  "metalsmith": {
    before: function (metalsmith, opts, helpers) {},
    after: function (metalsmith, opts, helpers) {}
  }
}

 在meta.{js,json}中可使用的附加數據

• destDirName - 目標目錄名稱

{
  "completeMessage": "To get started:\n\n  cd {{destDirName}}\n  npm install\n  npm run dev"
}

• inPlace - 在當前目錄下生成模板

{
  "completeMessage": "{{#inPlace}}To get started:\n\n  npm install\n  npm run dev.{{else}}To get started:\n\n  cd {{destDirName}}\n  npm install\n  npm run dev.{{/inPlace}}"
}

complete函數

 參數：

• data：你能夠在completeMessage中訪問到的一樣的數據

{
  complete (data) {
    if (!data.inPlace) {
      console.log(`cd ${data.destDirName}`)
    }
  }
}

• helpers: 一些在你記錄日誌的時候可能用到的幫助信息

chalk: chalk模型

logger: 內置的日誌對象

files: 記錄生成文件的數組

{
  complete (data, {logger, chalk}) {
    if (!data.inPlace) {
      logger.log(`cd ${chalk.yellow(data.destDirName)}`)
    }
  }
}

安裝指定版本號的模板

vue-cli使用第三方插件download-git-repo來下載使用的官方模板。download-git-repo工具容許經過在項目名稱後面加上一個#號來指定分支名。

指定一個官方模板的格式是：

vue init '<template-name>#<branch-name>' <project-name>

    Example:

    安裝webpack-sample vue模板的1.0分支版本

vue init 'webpack-simple#1.0' mynewproject

 注意：由於#號的特殊含義，在zsh shells上兩邊的分號是必須的。

 

 

 想查看英語原文請看  https://www.npmjs.com/package/vue-cli#vue-build