学习搭建一个自己的 vue 脚手架 制作 Commands 二

旺仔米苏
71 阅读2分钟

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

七、制作 Commands 二

引言

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

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

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

制作 Commands

上一节，我们成功的制作了一个 Commands，不过方式很简单

这一节，将使用第二种方式，来进行实现 一个 Commands

查看 vue cli

这里我们先看下 vue cli 的 Commands 长什么样子

  • 通过 vue create --help 可以看到有很多方式

    image.png

上面，我框起来的部分，是它新增的 options。

但是我们的脚手架里面并没有，所以我们也新增一个

下面，我们来慢慢来实现

方式二

这里使用到的是 增加一个 options 可选参数

在 lib\core\commands.js 文件下，修改我们的 create 方法

const create = (program) => {
  program
    .command('create <app-name> [options]')
    .description('create a new project powered by wzms-cli')
    .action((name, options) => {
      console.log(name, options)
    })
}

这里直接把 三种 情况 以及 结果 放出来，大家可以看下

  • options 参数没输入

  • options 输入 一个 参数

  • options 输入 两个 参数

image.png

好，看明白了，那么问题也来了

  • 如果 options 参数值是多个，如何获取呢？

    解决方法如下：

    • 修改一行代码即可，将 [options] 改成 [options...] 即可

      image.png

    得到的结果如下图：

    image.png

由此，可以看到与上面的区别是什么！

这里总结一下：

  • 如果是 [options] 只能获取一个参数，并且是可选的，得到的值是 一个 string

  • 如果是 [options...] 则可以获取多个参数，也是可选的，得到的值 是一个 Array，里面的值都是 stirng 类型

    • 输入 wzms-cli create aaa bbb 9

    • 则得到的值为 aaa [ 'bbb', '9']

总结

这一节，给我们的脚手架 Commands 增加了 options

avatar
文章
阅读
粉丝