首页 > 其他分享 >『手撕Vue-CLI』添加终端用户交互

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

时间:2024-05-27 09:22:30浏览次数:13  
标签:Vue CLI 用户 终端用户 template inquirer message 交互 模板

前言

经过上一篇文章的梳理,实现了可以从 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,用户,终端用户,template,inquirer,message,交互,模板
From: https://www.cnblogs.com/BNTang/p/18214803

相关文章

  • clion中解决控制台输出中文时的乱码问题
    1.项目编码配置都建议设置为utf-8编码  2.按住Ctrl+Shift+Alt+/,选中Registry…,然后取消run.processes.with.pty  3.重新运行程序,乱码消除(不行的话,关闭clion,再打开试试) ......
  • vue中引入js脚本块或者js文件 js函数 js方法
    一、vue中,使用js函数的方法在vue文件中,如果想要在组件里,通过事件触发,调用到函数,这个函数需要放在特定的位置,如下:<script>exportdefault{methods:{t1(){},t2(){},t3(){}}}</script>例如用户点击,通过click事件触发,调用t1函数,......
  • 锐捷(ruijie)无线网络基础配置-通过CLI命令配置
    场景:AC旁挂在三层接入交换机上,交换机连接瘦AP1和瘦AP2;接入交换机做为DHCP地址池下发AP管理地址和用户的业务地址;AP管理VLAN和设备互联VLAN使用VLAN10,用户业务VLAN使用VLAN20;AP1关联SSIDtest1,使用本地转发模式转发用户数据流量;AP2关联SSIDtest2,使用集中转发模式转发用户......
  • springboot+vue创建_2(分页)
    七、分页7.1//分页@PostMapping("/listPage")//publicList<Login00>listhu(@RequestBodyHashMapmap){publicList<Login00>listhu(@RequestBodyQueryPageParamqueryPageParam){//hashmap//System.out.println(......
  • Vue.js条件渲染与列表渲染指南
    title:Vue.js条件渲染与列表渲染指南date:2024/5/2620:11:49updated:2024/5/2620:11:49categories:前端开发tags:VueJS前端开发数据绑定列表渲染状态管理路由配置性能优化第1章:Vue.js基础与环境设置1.1Vue.js简介Vue.js(读音:/vjuː/,类似于"view")......
  • (读后分享)移动Web前端高效开发实战:HTML 5 + CSS 3 + JavaScript + Webpack + React Nat
    链接:pan.baidu.com/s/1tIHXj9HmIYojAHqje09DTA?pwd=jqso提取码:jqsoHTML5新特性与应用:介绍HTML5的新特性,包括语义化标签、本地存储、设备兼容、连接特性等,并讲解如何在移动Web前端开发中充分利用这些特性提升用户体验。CSS3样式与动画设计:详细讲解CSS3的样式设计和动画效果,包......
  • 震惊 vue+express创建的node上线竟然如此简单!
    1去阿里云申请服务器   首先登录阿里云,搜索服务器esc选择免费试用选择centos选择一台服务器   然后进入服务器控制台,点击概况选择重置密码修改root用户密码用户名为root不建议修改   点击远程连接输入自己的密码   输入命令安装宝塔面板 ......
  • FunClip - 阿里打造的创意魔剪:一键自动化短视频编辑,高效解锁视觉盛宴!
    ......
  • 关于Vue弹框组件this.$confirm
    确定后不能刷新页面列表show_tank(record){varthat=thisthis.$confirm({title:'您确定要选择吗?',content:'选择后不可修改',closable:true,//是否显示右上角的xmaskClosable:true,//触发阴影层的点击......
  • Vue3源码解析--收集的依赖是什么?怎么收集的?什么时候收集的?
    从Vue开始较大范围在前端应用开始,关于Vue一些基础知识的讨论和面试问题就在开发圈子里基本上就跟前几年的股票和基金一样,楼下摆摊卖酱香饼的阿姨都能说上几句那种。找过前端开发工作或者正在找开发工作的前端都知道,面试官基本上都有那么几个常问的问题,而网上呢也有那么一套可以用......