详解如何使用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数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
jQuery DOM操作小结与实例
Jan 07 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 Javascript
基于jQuery替换table中的内容并显示进度条的代码
Aug 02 Javascript
js实现数组转换成json
Jun 26 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
JS实现复制功能
Mar 01 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
在Vue 中获取下拉框的文本及选项值操作
Aug 13 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
基于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/10/09 PHP
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
php $_SERVER当前完整url的写法
2009/11/12 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
2019/04/23 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
详解Python中最难理解的点-装饰器
2017/04/03 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
Django stark组件使用及原理详解
2019/08/22 Python
Django实现分页显示效果
2019/10/31 Python
Django实现celery定时任务过程解析
2020/04/21 Python
pandas 数据类型转换的实现
2020/12/29 Python
单位门卫岗位职责
2013/12/20 职场文书
介绍信模板
2015/01/31 职场文书
倡议书范文大全
2015/04/28 职场文书
《刷子李》教学反思
2016/02/20 职场文书
python实现简单的井字棋
2021/05/26 Python
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android