详解如何使用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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
Javascript打印网页部分内容的脚本
Nov 17 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
Apr 08 Javascript
ajax的hide隐藏问题解决方法
Dec 11 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
JS图片预加载插件详解
Jun 21 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 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
2006/12/14 PHP
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
Node.js编码规范
2014/07/14 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
python thread 并发且顺序运行示例
2009/04/09 Python
Python入门篇之数字
2014/10/20 Python
基python实现多线程网页爬虫
2015/09/06 Python
Python字符串处理实例详解
2017/05/18 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
什么是python类属性
2020/06/10 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
大学生的四年学习自我评价
2013/12/13 职场文书
财务会计求职信范文
2015/03/20 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
银行求职信怎么写
2019/06/20 职场文书
pytorch中的 .view()函数的用法介绍
2022/03/17 Python