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文件作為元文件。它必須包含以下的字段：
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}}"
}
參數：
- 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
vue-cli簡介（中文翻譯）