详解如何使用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 相关文章推荐
ie和firefox中img对象区别的困惑
Dec 27 Javascript
从Ajax到JQuery Ajax学习
Feb 14 Javascript
javascript学习随笔(使用window和frame)的技巧
Mar 08 Javascript
js CSS操作方法集合
Oct 31 Javascript
JQuery 风格的HTML文本转义
Jul 01 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
轮播图组件js代码
Aug 08 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
JS实现的雪花飘落特效示例
Dec 03 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
Vue中的$set的使用实例代码
2018/10/08 Javascript
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
python字典排序的方法
2019/10/12 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
人力资源经理的岗位职责
2014/03/02 职场文书
高中生家长寄语大全
2014/04/03 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
一级电子管军用接收机测评
2022/04/05 无线电