详解如何使用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 相关文章推荐
ext 同步和异步示例代码
Sep 18 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
Mar 14 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
js取整数、取余数的方法
May 11 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
Vue.js的动态组件模板的实现
Nov 26 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
基于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程序61条面向对象分析设计的经验小结
2008/11/12 PHP
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
利用js对象弹出一个层
2008/03/26 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
详解用python实现简单的遗传算法
2018/01/02 Python
python2.7安装图文教程
2018/03/13 Python
举例讲解Python常用模块
2019/03/08 Python
详解python中list的使用
2019/03/15 Python
python Django的web开发实例(入门)
2019/07/31 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
详解python算法常用技巧与内置库
2020/10/17 Python
Python 实现进度条的六种方式
2021/01/06 Python
J2EE相关知识面试题
2013/08/26 面试题
大学生实习感言
2014/01/16 职场文书
商场中秋节广播稿
2014/01/17 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
小学班级口号
2014/06/09 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
艺术节开幕词
2015/01/28 职场文书
论文致谢词范文
2015/05/14 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers