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

十八、得到 inquirer 选择结果

引言

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

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

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

得到 inquirer 选择结果

上一节，我们通过 inquirer 这个工具库 来成功实现了类似于 vue cli 中的 create 方法，所产生的终端界面效果

这一节，讲解一下 我们在当前界面，如何得到自己所 选择的结果

得到选择结果

先看一下上一节，我们实现的效果图，如下

可以注意到有两个选择项

当然，这两个选项，都是我们之前 在 inquirer.prompt 这个里面写进去的

可以观察到 choices 这个数组，里面的两个对象，分别有 name 值 和 value 值

可是我们如何得到我们所选择的选项，然后看到结果呢？

这里我们再次修改一下这个文件的代码

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

console.log(answers, 'answers')
console.log('')

此时我们再次执行一下命令 vue create aaa，并且选择一个选项，可以看到下图的结果

可是 answers 里面的值，代表的什么意思呢？

下面我做一个对比图，大家就可以明白了

上面的左右两图 1，2，3，4 分别相互对应

那么我们就能够很好理解了，返回值 answers 里面的值对应的含义了

总结

这一节，我们学习了 在终端选择后，如何得到选择的结果