详解如何使用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 相关文章推荐
setTimeout的延时为0时多个浏览器的区别
May 23 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
开发一个Parcel-vue脚手架工具(详细步骤)
Sep 22 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 Javascript
js抽奖转盘实现方法分析
May 16 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
深入探讨PHP中的内存管理问题
2011/08/31 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
Dom与浏览器兼容性说明
2010/10/25 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
深入解析Vue 组件命名那些事
2017/07/18 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
Python中functools模块函数解析
2017/03/12 Python
Python探索之修改Python搜索路径
2017/10/25 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
python学生管理系统的实现
2020/04/05 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
中药专业毕业自荐书范文
2014/02/08 职场文书
工程承包协议书
2014/04/22 职场文书
化妆品活动策划方案
2014/05/23 职场文书
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python