详解如何使用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 相关文章推荐
Array栈方法和队列方法的特点说明
Jan 24 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
搭建vscode+vue环境的详细教程
Aug 31 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 Javascript
详解uniapp的全局变量实现方式
Jan 11 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 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
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
python检测远程端口是否打开的方法
2015/03/14 Python
python统计日志ip访问数的方法
2015/07/06 Python
python如何查看系统网络流量的信息
2016/09/12 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
python多进程间通信代码实例
2019/09/30 Python
解决python 上传图片限制格式问题
2019/10/30 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
公务员考察材料
2014/12/23 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
Redis批量生成数据的实现
2022/06/05 Redis