详解如何使用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 相关文章推荐
jquery清空textarea等输入框实现代码
Apr 22 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
JS点击缩略图整屏居中放大图片效果
Jul 04 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 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
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
jquery随机展示头像代码
2011/12/21 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
vue实现购物车小案例
2019/09/27 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
python批量处理文件或文件夹
2020/07/28 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
Python reques接口测试框架实现代码
2020/07/28 Python
Python打印不合法的文件名
2020/07/31 Python
python字典key不能是可以是啥类型
2020/08/04 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
大学自荐信
2013/12/12 职场文书
公司企业表扬信
2014/01/11 职场文书
银行授权委托书范本
2014/10/04 职场文书
老员工辞职信范文
2015/05/12 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
班级管理经验交流材料
2015/11/02 职场文书
创业计划书之家教中心
2019/09/25 职场文书
你需要掌握的20个Python常用技巧
2022/02/28 Python