持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天，点击查看活动详情

五、监听指令

引言

这里开始新的学习系列，动手搭建一个属于自己的 vue 脚手架

主要以 vue 官方的 vue cli 作为参考和学习

方便自己在后续创建 vue 项目时，不必总是复制粘贴

监听指令

上一节，我们成功获取到 options 后面跟的参数值，算是将 options 完成了！

这一节，我们补充一下 监听指令 的操作

什么是 监听指令

什么是 监听指令 呢？

举个例子

就是如果我们在输入我们的 --help 的时候，我们知道命令行输入了 这个 --help，我们来做一些反馈，或者新增一些内容，如下图

可以看到我们与 vue cli 之间的不同，在于缺少一个 Commands 一个补充

进行监听

那么我们如何 监听呢？

首先我们在 lib\core 目录下创建一个新的文件 eventListener.js 用于对我们的指令进行监听

监听还是通过 commander 这个库，使用它的 on 方法来进行监听，这里我们在 eventListener.js 文件中，进行监听方法的编写

const addHelp = (program) => {
  program.on('--help', () => {
    console.log('')
    console.log('Commands:')
    console.log('  create [options] <app-name>                create a new project powered by vue-cli-service')
  })
}

const commonOn = (program) => {
  addHelp(program)
}

module.exports = {
  commonOn
}

可以看到我们暴露出去一个 commonOn 函数，里面是直接执行我们的监听函数

在 bin\index.js 文件下 进行引入和使用

const { commonOn } = require('../lib/core/eventListener')

commonOn(program)

接下来我们再使用下我们的命令 wzms-cli --help

可以看到我们的效果与 vue cli 的效果很相近了

疑问和解答

在这里 你肯定会想，你怎么知道空格是多少？而且提示你是写了，但是怎么制作 Commands 里面的命令呢？

别着急，这一节只是学习了如何使用 监听指令，也只是通过 --help 来举个例子。

在实际情况下，是不会通过这个方式来进行提示的

下一节将会讲解如何产生 Commands 里面的命令！

总结

学习了什么是 监听指令，以及如何使用我们的 监听指令