详解如何使用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 相关文章推荐
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
JS模板实现方法
Apr 03 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
SeaJS中use函数用法实例分析
Oct 10 Javascript
javascript 中模板方法单例的实现方法
Oct 17 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 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
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
Python多继承顺序实例分析
2018/05/26 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
Python tkinter实现日期选择器
2021/02/22 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
大学应届毕业生个人求职信
2013/09/23 职场文书
学生实习推荐信范文
2013/11/26 职场文书
公司庆典活动邀请函
2014/01/09 职场文书
优秀幼教自荐信
2014/02/03 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
七年级地理教学计划
2015/01/22 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
春风化雨观后感
2015/06/11 职场文书
MySQL Server 层四个日志
2022/03/31 MySQL