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

十七、使用命令行交互工具

引言

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

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

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

使用命令行交互工具

上一节，我们学习了什么是 命令行的一个交互工具，并且讲解了其中最重要的字段 type

这一节，我们将学习如何使用 命令行的一个交互工具

这里先看一下通过 vue cli 使用命令 vue create aaa 后，终端的效果

可以看到是一个 无序的选择列表，支持通过键盘上的 上下键 来进行切换选择

它是通过 inquirer.prompt 中 type 为 list 产生的

type 在上一节，我们讲过有很多选择，很明显是 无序列表 ，所以值为 list

这里我们也来尝试实现以下 这种界面

首先在 lib\core\action\create.js 文件下，我们来对 createAction 这个方法进行新增代码

await inquirer.prompt([
    {
        name: 'preset',
        type: 'list',
        message: `Please pick a preset:`
])

可以看到这个对象里面，有一些基础 key 值 name、type、message

如果我们此时执行，它是会报错的

可以看到，它提示我们缺少字段 choices

因为是 list 列表，所以我们肯定得需要有 选项才行。下面我们添加一下

await inquirer.prompt([
    {
        name: 'preset',
        type: 'list',
        message: `Please pick a preset:`,
        choices: [
          {
            name: 'wzms',
            value: 'wzms'
          },
          {
            name: 'Manually select features',
            value: '__manual__'
          }
        ]
      }
])

这里我们再次执行一下 vue create aaa，可以看到结果如下图

可以看到成功的与 vue cli 实现的界面效果类似，并且展示了我们自己的字段。当然 vue cli 还做了存储之类的操作

我们这里还是先学习如何完整走一个流程，再进行深入学习！

总结

这一节，我们学习了如何来使用 命令行交互工具