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}}"
}

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

时间： 2024-10-01 05:16:22

vue-cli简介（中文翻译）

安装

使用

Example:

官方模板

自定义模板

本地模板

从头开始写自定义的模板

prompts

条件prompts

预登记Handlebars Helpers

自定义Handlebars Helpers

文件过滤

跳过渲染

Metalsmith

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

complete函数

安装指定版本号的模板

Example:

vue-cli简介（中文翻译）的相关文章

Vue CLI 3搭建vue+vuex 最全分析

如何使用@vue/cli 3.0在npm上创建，发布和使用你自己的Vue.js组件库

Vue CLI 3开发中试用UIkit 3组件库

Vue框架简介，实例成员，事件，过滤器，文本、事件和属性指令

Vue CLI 3.x搭建Vue项目

在vue cli 3脚手架里引入tinymce 5富文本编辑器

JavaScript中函数式编程中文翻译

中文翻译为"具象状态传输"的RESTful的架构风格和设计思想

《Entity Framework 6 Recipes》中文翻译系列目录篇 -持续更新

《Swift编程语言》中文翻译及读书笔记page25