详解如何使用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 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
js全屏显示显示代码的三种方法
Nov 11 Javascript
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
javascript的几种写法总结
Sep 30 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
js实现筛选功能
Nov 24 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入门学习知识点三 PHP上传
2011/07/14 PHP
php session劫持和防范的方法
2013/11/12 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
js使用心得分享
2015/01/13 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
原生js实现轮播图
2017/02/27 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
红黑树的插入详解及Javascript实现方法示例
2018/03/26 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
python通过smpt发送邮件的方法
2015/04/30 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
python super()函数的基本使用
2020/09/10 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
数据库方面面试题
2012/04/22 面试题
素质拓展感言
2014/01/29 职场文书
安全负责人任命书
2014/06/06 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
公司股东出资证明书
2014/11/01 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书