day03: 手写一个简单的CLI

初步认识

我们在快速创建vue项目时，使用命令vue create hello-world，在此之前先全局安装npm install -g @vue/cli。安装了@vue/cli 才可以使用命令vue create, 那么，这个cli到底是什么？

CLI一般指命令行界面。命令行界面（英语：command-line interface，缩写：CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。

简单来说，我们输入命令，然后计算机帮我们执行一系列固定的操作，而这些操作，是我们先前定义好的。以上面的创建vue项目的例子来说，我们执行vue create hello-world, 计算机就会创建vue项目的模板，而这些早在@vue/cli里定义好了。

那接下来的重点当然要说说cli如何定义了？

1. 创建一个js文件self-cli.js(任意命名), 如果希望某个文件是作为命令被执行的，那么只要在这个文件的开头写上: #!/usr/bin/env node， 这个文件什么都不做，只是打印一个“启动啦”

#!/usr/bin/env node
console.log('启动啦')

2. 在package.json里面配置

 "bin": {
        "yh": "bin/self-cli.js"
    },

看下我的文件目录：

目录

3. 在项目根目录下执行npm link链接到全局
4. 测试，执行yh ,结果如下
   image.png

一个do nothing 的cli就被开发出来了，如果要创建有用的cli，可以借助commander

升级

修改self-cli.js如下

#!/usr/bin/env node
const program = require('commander') //命令行工具
const chalk = require('chalk') // 让命令界面colorful
program
    .command('init <name>') // 定义init命令
    .description('init project')
    .action((name) => {
        console.log(chalk.green(`初始化${name}`))
    })
program.parse(process.argv) // 同志们，这一行一定要加!!!!!

program 说明
command 创建命令，后面可跟参数
description 描述
action 执行回调，即这个命令要做些什么
参考：https://github.com/tj/commander.js/blob/master/Readme_zh-CN.md

测试

image.png

如果action的逻辑很复杂，可以将它抽离成一个文件，一般将这些文件放在lib文件夹下。

好了，今天的分享就到这里了，高考生们加油！！！