详解如何使用Node.js编写命令工具——以vue-cli为例


Posted in Javascript onJune 29, 2017

vue-cli全局安装之后,提供了vue命令和vue init、vue list、vue build三个子命令,通过命令可以搭建基于vue.js的脚手架项目。本文简单介绍一下这些命令是如何实现的。

vue-cli的项目目录

如下图,由之前文章介绍,npm安装过程中,可以利用package.json中bin字段的配置,将bin目录下的命令文件软连到全局命令。也就是说在/usr/local/bin下生成了四个软连命令:vue、vue-build、vue-list、vue-init。

详解如何使用Node.js编写命令工具——以vue-cli为例

详解如何使用Node.js编写命令工具——以vue-cli为例 

vue命令的源码

#!/usr/bin/env node

 

require('commander')

 .version(require('../package').version)

 .usage('<command> [options]')

 .command('init', 'generate a new project from a template')

 .command('list', 'list available official templates')

 .command('build', 'prototype a new project')

 .parse(process.argv)

 该命令采用commander.js来实现。commander的主要方法:

(1)parse:用于解析process.argv,将process.argv.slice(2)赋值给program.args;

(2)command:创建子命令,子命令的使用方法是command <subcommand> [options],实际调用的命令是command-subcommand,如使用命令行执行vue list,其实是在执行vue-list全局命令;

(3)options:主要设置命令的参数,同时提供参数对应的说明文档,默认提供的option是--help。

vue-init子命令的实现

vue-init的主要功能是拉取指定git目录下的项目模板文件(官方或自制)到指定目录下,用法如下

$ vue init <template-name> <project-name>

这里仍需要解析process.argv,所以在vue-init中又引入了commander.js,生成了一个program

program

  .usage('<template-name> [project-name]')

  .option('--offline', 'use cached template')

 

/**

 * Help.

 */

 

function help () {

  program.parse(process.argv)

  if (program.args.length < 1) return program.help()

}

help()

接下来就是要实现拉取模板文件,经处理后,放置到产出目录下,具体如何实现的,接下来会有专门的文章介绍vue-cli命令的实现原理,敬请期待!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 加上最后自己的验证
Nov 04 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
jQuery each函数源码分析
May 25 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 Javascript
vue组件的路由高亮问题解决方法
May 11 Vue.js
基于angular2 的 http服务封装的实例代码
Jun 29 #Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 #Javascript
详解vue数据渲染出现闪烁问题
Jun 29 #Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 #Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 #Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 #jQuery
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 #Javascript
You might like
PHP批量生成缩略图的代码
2008/07/19 PHP
PHP 基本语法格式
2009/12/15 PHP
php中的动态调用实例分析
2015/01/07 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
php中关于换行的实例写法
2019/09/26 PHP
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
javascript数组详解
2014/10/22 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
python daemon守护进程实现
2016/08/27 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
2014年教师培训的自我评价
2014/01/03 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
大学生英文求职信范文
2015/03/19 职场文书
公司员工培训管理制度
2015/08/04 职场文书
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL