前言前言前言前端日常开发中，会遇见各种各样的 cli，使用 vue 技术栈的你一定用过 @vue/cli ,同样使用 react 技术栈的人也一定知道 create-react-app 。利用这些工具能够实现一行命令生成我们想要的代码模版，极大地方便了我们的日常开发，让计算机自己去干繁琐的工作，而我们，就可以节省出大量的时间用于学习、交流、开发。@vue/clicreate-react-appcli 工具的作用在于它能够将我们开发过程中经常需要重复做的事情利用一行代码来解决，比如我们在写需求的时候每新增一个页面就需要相应的增加该页面的初始化代码，而相同文件类型的初始化代码往往是一样的，比如 example.vue。同时我们还需要增加对应的路由，比如在 router.js 中增加对应的路由规则。这些工作都是很繁琐又重复的，每次遇到这种情况都重复一遍吗？是时候作出改变了，编写自己的 cli 工具，一行命令，3 秒钟进入 coding 状态！本文以自己的 fc-vue-cli 为例，将开发到发布过程完整记录下来，看完本文，你将学会如何从零开发一个 cli 项目，以及如何使用 npm 发布自己的包。提前放上该项目地址提前放上该项目地址提前放上该项目地址源代码地址： 源代码源代码npm 地址： npmnpm原文地址（github上）：githubgithub要实现的功能fc-vue add-page
通过这行命令来新增一个页面的模版文件，省去了手动新建文件，手动复制初始化代码的麻烦，同时添加上对应的路由配置脚手架的名字定为 fc-vue,这个是通过 package.json 里面的 name 字段来定义的。目录结构 目录结构 目录结构
入口 (bin/index.js)入口文件只做了一件事，那就是判断当前node的版本是否大于10，如果版本号<10则提醒用户升级node
#!/usr/bin/env node

// 'use strict';
const chalk = require('chalk');

const currentNodeVersion = process.versions.node;
const major = currentNodeVersion.split('.')[0];
if (major < 10) {
console.error(
chalk.red(

`You are running Node \n${currentNodeVersion} \nvue-assist-cli requires Node 10 or higher.\nPlease update your version of Node`
)
);
process.exit(1);
}

require('../packages/init');
#!/usr/bin/env node

// 'use strict';
const chalk = require('chalk');

const currentNodeVersion = process.versions.node;
const major = currentNodeVersion.split('.')[0];
if (major < 10) {
console.error(
chalk.red(

`You are running Node \n${currentNodeVersion} \nvue-assist-cli requires Node 10 or higher.\nPlease update your version of Node`
)
);
process.exit(1);
}

require('../packages/init');初始化命令 (packages/init.js)初始化命令 (packages/init.js)初始化命令 (packages/init.js)在这里初始化你要实现的命令，比如我要实现 add-page 功能,这里要用到的 commander 库。commander
const { program } = require('commander');
const { log } = require('./lib/util');

// 初始化版本，我们直接获取package.json里面的版本号就可以了
program.version(require('../package.json').version);
//开始添加命令 [name] 说明这个参数是可选的，我们想做到兼容不同的使用方法所以把这个参数设置未可选
//.description里面可以写上这个命名的一些描述，当用户fc-vue help add-page 的时候可以提供帮助文档
//.option 用来添加可选的参数
//.action用来响应用户的输入，这里我们单独用一个文件./commands/add-page来处理
program
.command('add-page [name]')
.description(

'add a page, 默认加在./src/views 或 ./src/pages 或./src/page目录下，同时添加路由\n支持"/"来创建子目录例如:add-page user/login\n使用时，支持 fc-vue add-page 【回车】 来选择输入信息'
)
.option('-s, --simple', '创建简单版的页面，只新增一个.vue文件')
.option('-t, --title