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

十、制作 Commands 五，多个 options

引言

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

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

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

多个 options

上一节，我们成功的在 Commands 中，进行正确的使用了可选参数 options

这一节，我们来进行 多个 可选参数 option 的使用

首先还是在我们的 lib\core\commands.js 文件下，来修改我们的 create 方法

const create = (program) => {
  program
    .command('create <app-name>')
    .description('create a new project powered by wzms-cli')
    .option('-p, --preset', 'Skip prompts and use saved or remote preset')
    .option('-d, --default','Skip prompts and use default preset')
    .action((name,options) => {
      console.log(name,options)
    })
}

可以看到我们是又添加了一个 -p 属性，详细字段为 preset 的一个 option

之后，我们在控制台输入命令，先看下是否添加成功

wzms-cli create aaa -p 

竟然报错了！这时可能会疑问，我们的 preset 为什么变成 --port 了？

其实这个问题是我们之前在 lib\core\options.js 定义的代码，没有注释之前的代码所导致的

将其注释后，我们再次执行代码，结果如下图

可以看到我们成功的又添加了一个 option 可选参数

关键点

既然上面的那个也成功添加了，那么是否可以存在两个 options 呢？

我们测试一下

wzms-cli create aaa -p -d

可以发现是可以同时存在两个参数的，我们如果要取值的话，分别进行取值判断即可

这里再看下我们的 create 方法，与 vue cli 的差距

可以看到已经很靠近了，接下来就是逻辑 和 参数的 处理了

总结

我们可以在 Commands 中，来使用多个 option