详解如何使用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剩余字数计算的代码
Jul 03 Javascript
jQuery-ui中自动完成实现方法
Jun 10 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
javascript中var的重要性分析
Feb 11 Javascript
JQuery基础语法小结
Feb 27 Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
关于vue面试题汇总
Mar 20 Javascript
JS面向对象的程序设计相关知识小结
May 26 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
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
Javascript之文件操作
2007/03/07 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
JS中的phototype详解
2017/02/04 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
Python 文件操作实现代码
2009/10/07 Python
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
快速了解Python中的装饰器
2018/01/11 Python
Python处理中文标点符号大集合
2018/05/14 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
python读写csv文件方法详细总结
2019/07/05 Python
对Django url的几种使用方式详解
2019/08/06 Python
如何基于python操作json文件获取内容
2019/12/24 Python
pytorch 修改预训练model实例
2020/01/18 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
我读书我快乐演讲稿
2014/05/07 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
干部个人对照检查材料
2014/08/25 职场文书
高中运动会广播稿
2014/09/16 职场文书
台风停课通知
2015/04/24 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书