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

來從

BitBucke

t代碼

庫中擷取模闆（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檔案作為元檔案。它必須包含以下的字段：

prompts : 用來儲存使用者選項資訊;
filters : 用來對需要渲染的檔案進行條件過濾
metalsmith : 用來在鍊中增加自定義的metalsmith插件
completeMessage : 模闆建立之後顯示給使用者的消息。可以在這裡放一些自定義的說明。
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

轉載于:https://www.cnblogs.com/cryRoom/p/8408716.html

vue-cli簡介（中文翻譯）

安裝

使用

Example:

官方模闆

自定義模闆

本地模闆

從頭開始寫自定義的模闆

prompts

條件prompts

預登記Handlebars Helpers

自定義Handlebars Helpers

檔案過濾

跳過渲染

Metalsmith

在meta.{js,json}中可以使用的附加資料

complete函數

安裝指定版本号的模闆

Example:

繼續閱讀

CSU 1566 The Maze Makers

UESTC 1269 ZhangYu Speech

阿裡巴巴Double分布式服務架構

關于 underscore 中模闆引擎的應用示範樣例

underscore 模闆标簽修改。

Ajax——模闆引擎

使用underscore的template自定義模闆

underscore模闆功能的使用和學習

[Linux] diff 查找檔案的異同

IDEA以http形式clone代碼連接配接逾時

[HTML5]自定義屬性 data-* 和 jQuery.data 詳解

七牛雲-C#SDK-上傳-前期準備

最小化DevOps自動化流程(Golang)

Git學習筆記5 merge沖突時二選一

Ajax發送和擷取json資料到Spring mvc 1.spring mvc後端2.web前段

JSONObject包導入異常 java.lang.NoClassDefFoundErrorweb項目的導入包的問題