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同时支持链接bitBucketgithub)并使用 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

vue-cli简介(中文翻译)的更多相关文章

  1. 中文翻译:pjsip教程(一)之PJNATH简介

    在学习pjsip的过程中,发现只是单单的阅读英文官方文档,对于里边概念的理解还是不够透彻,并且苦于pjsip没有发现全一点的中文版本,所以想尽自己所能为建设和谐社会而贡献一份力量,文中定会有所疏漏,希 ...

  2. [中文翻译] ASP.NET 5 简介(Introducing ASP.NET 5,原作ScottGu 2015/2/23)

    本文出处  [中文翻译] ASP.NET 5 简介(Introducing ASP.NET 5,原作ScottGu 2015/2/23) 这是我的文章备份 http://www.dotblogs.co ...

  3. Vue 3.0 Composition API - 中文翻译

    Composition API 发布转载请附原文链接 https://www.cnblogs.com/zgh-blog/articles/composition_api.html 这两天初步了解了下 ...

  4. [转]Vue CLI 3搭建vue+vuex 最全分析

    原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...

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

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...

  6. Spark SQL 官方文档-中文翻译

    Spark SQL 官方文档-中文翻译 Spark版本:Spark 1.5.2 转载请注明出处:http://www.cnblogs.com/BYRans/ 1 概述(Overview) 2 Data ...

  7. 中文翻译:pjsip文档(四)之ICE Session的使用方法

    1:pjsip教程(一)之PJNATH简介 2:pjsip教程(二)之ICE穿越打洞:Interactive Connectivity Establishment简介 3:pjsip教程(三)之ICE ...

  8. Vue CLI 3+tinymce 5富文本编辑器整合

    基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...

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

    译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...

  10. Vue Cli安装以及使用

      因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...

随机推荐

  1. BZOJ [POI2004]PRZ 状压DP_二进制_骚操作

    二进制就是比谁更sao... Code: #include <bits/stdc++.h> #define setIO(s) freopen(s".in"," ...

  2. vue-路由使用

    路由安装 终端下载路由插件 npm install vue-router --save-dev 配置 在main.js中引入插件 //Router 为自定义名 vue-router 为插件的名字 im ...

  3. LINUX - .so 与 .a

    .a gcc -c test1.c test2.c(或者g++ -c test1.cpp test2.cpp  )---   .o ar -r libtest.a test1.o test2.o    ...

  4. python 从给定的URL中提取顶级域名(TLD)

    安装 PyPI的最新稳定版本: pip install tld 或者GitHub的最新稳定版本: pip install https://github.com/barseghyanartur/tld/ ...

  5. selenium使用Xpath+CSS+JavaScript+jQuery的定位方法(治疗selenium各种定位不到,点击不了的并发症)

    跟你说,你总是靠那个firebug,chrome的F12啥的右击复制xpath绝对总有一天踩着地雷炸的你死活定位不到,这个时候就需要自己学会动手写xpath,人脑总比电脑聪明,开始把xpath语法给我 ...

  6. js对比for、forEach、map遍历数组速度

    function a() { var arr = new Array(1000000); for(var i = 0; i < arr.length;i ++) { arr[i] = i; } ...

  7. HashMap源码分析笔记(一)

    一.结构 HashMap的结构由数组和链表组成,可以说是一个链表类型的数组: 快速定位方式:key值得hash变换作为数组索引快速找到对应数组块,之后通过hash值对比从链表中查找到匹配项. hash ...

  8. 数据持久层(DAO)通用API的实现

    在Web开发中,一般都分3层.Controller/Action 控制层,Service/Business 服务层/业务逻辑层,Dao 数据访问层/数据持久层. 在学习和工作的实践过程中,我发现很多功 ...

  9. java 反射之获取泛型对象的所有字段与对应的值(包括父类的)

    上代码: public static void main(String[] args) throws IntrospectionException { SysUser obj = new SysUse ...

  10. (16)Spring Boot使用Druid(编程注入)【从零开始学Spring Boot】

    在上一节使用是配置文件的方式进行使用druid,这里在扩散下使用编程式进行使用Druid,在上一节我们新建了一个类:DruidConfiguration我在这个类进行编码: package com.k ...