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

四、增加 options 二

引言

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

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

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

增加 options 二

上一节，我们成功的给自己的脚手架，添加了一个 options 可选参数的选项

有几个注意点，这里说明下

• wzms-cli -a 我们这里使用的是简写

• wzms-cli -aaa 效果与上面一样，这个是全写的方式

增加 options

可以看到上面的操作，都是直接使用

但是呢，大多数情况下，我们可能在命令后面会跟上 一个参数，例如

wzms-cli --port 8080

如果此时我们想要获取到这个 8080 参数值，该如何处理呢？

首先在 lib/core/options.js 的 useOptions 函数内部，新增一条 options 命令

program.option('-p, --port <portNumber>', '给我一个端口号')

可以看到 我们比之前多了一个 尖括号，这个代表我们可以传递参数

• 如果我们忘记传递参数，那么会进行报错，如下图

  

• 传递参数

  

  可以看到没有任何的反应，那么我们如何获取到我们的参数值呢

  其实所有的参数都在 program._optionValues 里面

  我们在 bin/index.js 文件中，添加

  program.parse(process.argv)
  
  console.log(program._optionValues)
  

  注意位置添加的位置是在 解析指令之后。

  在控制台输入，结果如下图

  

可以看到成功的获取到我们的结果值

到这里，看似没有问题，实际上有一个注意点：

我们可能会认为 这个对象里面的 key 值，应该是 portNumber，但是 实际上是我们的 详细的 port

总结

成功的增加了 options 选项，并且能够获取到，传递参数的 options 的参数值。