详解如何使用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 相关文章推荐
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
Vue波纹按钮组件制作
Apr 30 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
ES6箭头函数和扩展实例分析
May 23 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 Javascript
基于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提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
php中防止伪造跨站请求的小招式
2011/09/02 PHP
PHP云打印类完整示例
2016/10/15 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
js控制的遮罩层实例介绍
2013/05/29 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
python分析apache访问日志脚本分享
2015/02/26 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
英国最大的百货公司:Harrods
2016/08/18 全球购物
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
大学本科毕业生求职信范文
2013/12/18 职场文书
索桥的故事教学反思
2014/02/06 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技