『手撕Vue-CLI』添加终端用户交互

vue,cli · 浏览次数 : 0

小编点评

**文章概述** 该文章介绍了如何使用 NodeJS 的 `inquirer` 库实现终端用户交互,用户可以自己选择想要使用的模板名称,并根据选择的模板名称拉取对应的模板项目。 **安装 `inquirer` 库** 使用 npm 安装 `inquirer` 库: ``` npm install --save inquirer@^8.0.0 ``` **使用 `inquirer` 库** 1. 读取模板名称: ```javascript const inquirer = require('inquirer'); const templateNames = ['template1', 'template2', 'template3']; const { template } = await inquirer.prompt([ { type: 'list', name: 'template', message: 'Please choose a template to create project', choices: templateNames, }, ]); ``` 2. 打印用户选择的模板名称: ```javascript console.log(template); ``` **总结** 使用 `inquirer` 库可以实现终端用户交互,用户可以自己选择想要使用的模板名称,并根据选择的模板名称拉取对应的模板项目。

正文

前言

经过上一篇文章的梳理,实现了可以从 GitHub 上拉取模板项目名称,已经可以得知可使用的模板有哪些了,那么我觉得是不是要进行选择呢?所以这一篇文章就来实现终端用户交互,让用户可以自己选择想要使用的模板。

实现

在 NodeJS 当中,已经有人为我们封装好了一个库,叫做 inquirer,可以帮助实现终端用户交互,只需要安装这个库,然后调用它的方法就可以了。

官方地址:https://www.npmjs.com/package/inquirer

接下来就是安装官方文档带着大家来实现这个功能即可。

安装 inquirer

我这里采用的是 8.0.0 版本,可以直接在终端输入以下命令进行安装。

npm install --save inquirer@^8.0.0

为什么使用 8.0.0 版本呢?因为:

如果是更高版本版本的话,就不能使用 require('inquirer') 这种方式引入了,所以我这里选择了 8.0.0 版本,后面的使用方式也是围绕着这个版本来的。

使用 inquirer

bin/create.js 文件中引入 inquirer

const inquirer = require('inquirer');

然后在 fetchRepoList 方法中调用 inquirerprompt 方法,prompt 方法接收一个数组参数,数组中的每一项就是对象,对象的属性就是设计到用户与终端的交互类型配置等等,这里我就不一一介绍了,大家可以参考官方文档,这里我只介绍一些常用的属性。

  • type:表示交互的类型,有很多种,比如 inputconfirmlistrawlistexpandcheckboxpasswordeditor;
  • name:存储当前问题回答的变量;
  • message:问题的描述;
  • default:默认值;
  • choices: 列表选项,在某些 type 下可用,并且包含一个分隔符(separator);
  • validate:对用户输入的值进行验证;
  • filter:对用户的回答进行过滤处理,返回处理后的值;
  • transformer:对用户回答的显示效果进行处理(如:修改回答的字体或背景颜色),但不会影响最终的答案的内容;
  • when:根据前面问题的回答,判断当前问题是否需要被回答;
  • pageSize:修改某些 type 类型下的渲染行数;
  • prefix:修改 message 默认前缀;
  • suffix:修改 message 默认后缀;

属性值的详细介绍还可以参考官方文档:https://www.npmjs.com/package/inquirer#questions

好,大致差不多就是这样了,接下来我们来看一下代码该怎么写,首先往数组中添加一个对象,因为我现在要用户所做的操作是进行选择自己想要使用的模板,所以该对象的 type 属性就是 list,通过如上的属性介绍可以得知 name 属性就是存储当前问题回答的变量,这里我就命名为 repomessage 属性就是问题的描述,这里我就写为 Please choose a template to create projectchoices 属性就是列表选项,可以将通过 fetchRepoList 方法获取到的模板名称数组赋值给它。

// 选择模板
inquirer.prompt([
    {
        type: 'list',
        name: 'template',
        message: 'Please choose a template to create project',
        choices: templateNames
    }
]);

这里的代码还可以改一下因为 inquirer.prompt 方法返回的是一个 Promise 对象,直接通过 await 来接收它的返回值,然后将返回值赋值给一个变量,这样就可以拿到用户选择的模板名称了。

// 选择模板
const { template } = await inquirer.prompt([
    {
        type: 'list',
        name: 'template',
        message: 'Please choose a template to create project',
        choices: templateNames
    }
]);
console.log(template);

这么一来,我们就可以在终端看到用户选择的模板名称了,接下来就是根据用户选择的模板名称来拉取对应的模板项目了。

最后来总结一下本次的操作,总的来说过呢,就是给大家介绍了一个可以实现终端用户交互的库 inquirer,然后通过这个库来实现用户选择想要使用的模板,这样就可以根据用户的选择来拉取对应的模板项目了。

在以后大家开发项目的时候,如果需要实现终端用户交互的话,可以使用这个库,它的使用方式也是非常简单的,只需要调用它的方法,然后传入一些配置就可以了。

本章要介绍的内容不是很多,但是这都是一个一个的小步骤,每一步都是一个进步,不要着急,慢慢来,一步一步的来,这样才能更好的掌握知识。

与『手撕Vue-CLI』添加终端用户交互相似的内容:

『手撕Vue-CLI』添加终端用户交互

前言 经过上一篇文章的梳理,实现了可以从 GitHub 上拉取模板项目名称,已经可以得知可使用的模板有哪些了,那么我觉得是不是要进行选择呢?所以这一篇文章就来实现终端用户交互,让用户可以自己选择想要使用的模板。 实现 在 NodeJS 当中,已经有人为我们封装好了一个库,叫做 inquirer,可以

『手撕Vue-CLI』拉取版本号

开篇 在上一篇文章中,给 nue-cli 添加了与用户终端交互的功能,这一次来实现一个拉取版本号的功能。 这个功能的背景是,有时候我们在使用脚手架的时候,不同版本的脚手架可能会有不同的功能,所以用户有可能会根据自己的需求选择不同的版本,所以这里将会实现一个根据用户选择的版本号,拉取对应的版本号的模板

『手撕Vue-CLI』添加自定义指令

前言 经上篇『手撕Vue-CLI』添加帮助和版本号的介绍之后,已经可以在控制台中输入 nue --help 来查看帮助信息了,但是在帮助信息中只有 --version,--help 这两个指令,而 vue-cli 中还有很多指令,例如 create,serve,build 等等,所以本章将继续添加自

『手撕Vue-CLI』添加帮助和版本号

前言 经过上一篇『手撕Vue-CLI』编码规范检查之后,手撕 Vue-CLI 已经进阶到了代码规范检查这一步,已经将基本的工程搭建好了,然后代码规范约束也已经加入了,并且将 nue-cli 指令绑定到了全局当中,可以在任何地方使用了。 正文 接下来这篇文章呢,就要来实现一下大多数的命令行工具都会有的

『手撕Vue-CLI』添加自定义指令

前言 经上篇『手撕Vue-CLI』添加帮助和版本号的介绍之后,已经可以在控制台中输入 nue --help 来查看帮助信息了,但是在帮助信息中只有 --version,--help 这两个指令,而 vue-cli 中还有很多指令,例如 create,serve,build 等等,所以本章将继续添加自

『手撕Vue-CLI』处理不同指令

前言 在上一篇『手撕Vue-CLI』添加自定义指令中,已经实现了自定义指令的添加,但是指令还是比较简单的,只是简单的打印一句话,那么在实际运用场景中,可能会有更多的需求,比如可能需要在指令中传递参数,或者需要在指令中进行一些复杂的操作,那么这个时候我们就需要对指令进行处理了。 创建指令处理文件 在上

『手撕Vue-CLI』函数柯里化优化代码

开篇 在上一篇文章中,给 nue-cli 添加了拉取版本号的功能,这一次来优化一下代码,使用函数柯里化的方式来优化代码。 实现 函数柯里化 函数柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。 在进行改写之前,首先给大家简单介绍一下函数柯里化,写一个简单的例子来演示一下。

『手撕Vue-CLI』完善提示信息

前言 经过『手撕Vue-CLI』自动安装依赖,已经实现了自动安装依赖的功能。 然而,虽然项目已复制并安装依赖,但其提示信息并不够友好,于是我试着去运行了一下vue create,发现其提示信息是这样的: 于是我决定完善提示信息,也借此机会完善一下项目的代码,变量命名等。 完善提示信息 完善变量命名

『手撕Vue-CLI』自动安装依赖

开篇 经过『手撕Vue-CLI』拷贝模板,实现了自动下载并复制指定模板到目标目录。然而,虽然项目已复制,但其依赖并未自动安装,可能需要用户手动操作,这并不够智能。 正如前文所述,我们已经了解了业务需求和背景。那么,接下来我们将直接深入探讨核心实现细节。 自动安装依赖 在前文中,我们已经将模板文件复制

『手撕Vue-CLI』拷贝模板

开篇 经过上篇文章的介绍,实现了可以根据用户选择的模板名称加上对应的版本号,可以下载对应的模板,并且将下载之后的文件存放在用户目录下的 .nue-template文件夹中。 接下来这篇文章主要实现内容是将下载的模板文件拷贝到当前所执行命令的目录下。 拷贝模板 例如我现在在终端当中输入 nue-cli