详解如何使用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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
15款优秀的jQuery导航菜单插件分享
Jul 19 Javascript
js实现广告漂浮效果的小例子
Jul 02 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
jQuery命名空间与闭包用法示例
Jan 12 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
vue2配置scss的方法步骤
Jun 06 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
element中el-container容器与div布局区分详解
May 13 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设计模式中工厂模式详细介绍
2013/05/15 PHP
php检测文件编码的方法示例
2014/04/25 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
学习ExtJS TextField常用方法
2009/10/07 Javascript
JavaScript 事件记录使用说明
2009/10/20 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
下载官网python并安装的步骤详解
2019/10/12 Python
python 循环数据赋值实例
2019/12/02 Python
使用python实现飞机大战游戏
2020/03/23 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
EJB3.1都有哪些改进
2012/11/17 面试题
企业开业庆典答谢词
2015/01/20 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
bose降噪耳机音能消除人声吗
2022/04/19 数码科技