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