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

十一、制作 Commands 六，option 参数

引言

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

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

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

option 参数

上一节，我们成功的在 Commands 中，使用了 多个 option 可选参数

这一节，我们来给 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 <presetName>', 'Skip prompts and use saved or remote preset')
    .option('-d, --default','Skip prompts and use default preset')
    .action((name,options) => {
      console.log(name,options)
    })
}

可以看到我们在 option 的 -p 属性里面，添加了一个 尖括号包裹的 presetName 字段名

这个就是我们可以在 -p 后面，添加参数

之后，我们在控制台输入命令，先看下打印的效果

wzms-cli create aaa -p 

wzms-cli create aaa -p bbb

wzms-cli create aaa -p bbb -d

这里用了 三行命令 ，可以观察到

• 如果我们在 -p 后面没有参数的话，会进行报错

• 可以两个 option 命令共存

关键点

既然上面讲解了简单的使用，接下来讲解重点

先提出疑问：

• 如果我的 -p 后面 直接跟上 -d，结果如何？

• 如果我的 -p 放在中间呢，结果会是什么？

wzms-cli create aaa -p -d

wzms-cli create -p aaa

wzms-cli create -p aaa bbb -d

wzms-cli create -p aaa -d bbb

这里给出了四行代码，大家可以先试着想一下，对应的结果是什么！

回答：

• wzms-cli create aaa -p -d

  因为我们的 -p 后面需要跟上参数，所以我们会先将 -p 后面的值，作为我们的参数

  之后才会继续往后面看，是否还有其他 option 的值

• wzms-cli create -p aaa

  这个 -p 放到中间，但是 -p 后面必须有参数，所以 aaa 这个值，作为 -p 的参数，被接受了

• wzms-cli create -p aaa bbb -d

  通过上面，这个就很好理解，就会将 bbb 作为项目名

• wzms-cli create -p aaa -d bbb

  这个也是一样的，虽然位置调换了，但项目名 还是 bbb

最终结果如下图

总结

我们可以给 Commands 中的 option 增加参数，用尖括号包裹