前言：現(xiàn)在前端寫項目估計都是使用 NodeJs 來構(gòu)建纺讲，一般在安裝 npm 包的時候未檩，我們會對項目進行初始化蕾总，這是輸入命令：npm init 或 npm init -y粥航。接下來就是幾個交互命令，輸入完成就會創(chuàng)建一個依賴文件：package.json生百。
但如果想自己做一個腳手架或者在某些時候在 CMD 窗口進行交互递雀，這個時候就可以使用 inquirer.js。
首先npm init 初始化一個文件夾蚀浆，來測試這個庫缀程，然后安裝包：
npm install --save inquirer
再在文件夾里面新建一個 app.js搜吧，接下來的所有測試均在這個文件里面。
一杨凑、簡單功能參數(shù)介紹
- type：表示提問的類型滤奈，包括：input、confirm撩满、 list蜒程、rawlist、expand伺帘、checkbox昭躺、password、editor伪嫁。
- name: 存儲當(dāng)前輸入的值领炫。
- message：問題的描述。
- default：默認(rèn)值礼殊。
- choices：列表選項驹吮，在某些type下可用，并且包含一個分隔符(separator)晶伦；
- validate：對用戶的回答進行校驗碟狞。
- filter：對用戶的回答進行過濾處理，返回處理后的值婚陪。
- when：根據(jù)前面問題的回答族沃，判斷當(dāng)前問題是否需要被回答。
- pageSize：修改某些type類型下的渲染行數(shù)泌参。
- prefix：修改message默認(rèn)前綴脆淹。
- suffix：修改message默認(rèn)后綴。
二沽一、input輸入
2.1 一個輸入
const inquirer = require("inquirer");
inquirer.prompt([
{
type:"input",
message:"請輸入你的姓名：",
name:"name",
default:"大傻子"
}
]).then(answer=>{
// 用戶輸入的結(jié)果最終會在這里輸出
console.log(answer);
});
運行測試結(jié)果：
C:\Users\Administrator\Desktop\propt>node app.js
? 請輸入你的姓名： Condoe Hero
{ name: 'Condoe Hero' }
C:\Users\Administrator\Desktop\propt>
2.2 兩個輸入
const inquirer = require("inquirer");
inquirer.prompt([
{
type:"input",
message:"請輸入你的姓名：",
name:"name",
default:"大傻子"
},
{
type:"input",
message:"請輸入你的年齡:",
name:"age",
default:18
}
]).then(answer=>{
// 用戶輸入的結(jié)果最終會在這里輸出
console.log(answer);
});
程序運行結(jié)果：
C:\Users\Administrator\Desktop\propt>node app.js
? 請輸入你的姓名： Condor Hero
? 請輸入你的年齡: 18
{ name: 'Condor Hero', age: 18 }
C:\Users\Administrator\Desktop\propt>
接下來如果你想要一百個輸入那盖溺？肯定是。铣缠。烘嘱。（情商）
2.3 validate驗證
看看 validate 是啥樣？
const inquirer = require("inquirer");
inquirer.prompt([
{
type:"input",
message:"請輸入你的姓名：",
name:"name",
default:"大傻子"
},
{
type:"input",
message:"請輸入你的年齡：",
name:"age",
default:18,
validate:(val)=>{
if(val > 10 && val < 120){
return val;
}else{
return "我猜你絕對不是一個正常人類";
}
}
}
]).then(answer=>{
console.log(answer);
});
測試結(jié)果：
C:\Users\Administrator\Desktop\propt>node app.js
? 請輸入你的姓名： 大傻子
? 請輸入你的年齡： (18) 18
>> 18
三蝗蛙、confirm確認(rèn)
const inquirer = require("inquirer");
inquirer.prompt([
{
type:"confirm",
message:"是否現(xiàn)在監(jiān)聽蝇庭？",
name:"watch",
default:true
},
{
type: "confirm",
message: "是否能看到我取決于上面是否通過？",
name: "pass",
suffix: "后綴",
when: function(answer) { // 當(dāng)watch為true的時候才會到達這步
return answer.watch//只有我return true才會這個confirm
}
}
]).then(answer=>{
console.log(answer);
});
看看三種不同輸入結(jié)果有啥變化捡硅？
四哮内、前綴和后綴
const inquirer = require("inquirer");
inquirer.prompt([
{
type:"confirm",
message:"是否現(xiàn)在監(jiān)聽？",
name:"watch",
default:true,
prefix:"☆☆☆☆"http://前綴
},
{
type: "confirm",
message: "是否能看到我取決于上面是否通過壮韭？",
name: "pass",
suffix: "****",//后綴
when: function(answer) { // 當(dāng)watch為true的時候才會到達這步
return answer.watch //只有我return true才會這個confirm
}
}
]).then(answer=>{
console.log(answer);
});
五北发、list 選項組
5.1使用箭頭選擇
list 一般配合 choices 使用：
const inquirer = require("inquirer");
inquirer.prompt([
{
type:"list",
message:"請選擇一個選項：",
name:"fruit",
default:"Apple",
prefix:"☆☆☆☆",
suffix:"****",
choices:[
"Apple",
"pear",
"Banana"
],
filter: function (val) { // 使用filter將值變?yōu)榇髮? return val.toUpperCase();
}
}
]).then(answer=>{
console.log(answer);
});
查看動圖效果：
5.2 使用數(shù)字選擇
list 改成 rawlist
const inquirer = require("inquirer");
inquirer.prompt([
{
type:"rawlist",
message:"請選擇一個選項：",
name:"fruit",
default:"Apple",
prefix:"☆☆☆☆",
suffix:"****",
choices:[
"Apple",
"pear",
"Banana"
],
filter: function (val) { // 使用filter將值變?yōu)榇髮? return val.toUpperCase();
}
}
]).then(answer=>{
console.log(answer);
});
5.3 使用簡寫（自動擴展成全寫）
const inquirer = require("inquirer");
inquirer.prompt([
{
type:"expand",
message:"請選擇一個顏色：",
name:"color",
default:"red",
choices:[
{
key : 'R',
value : "red"
},
{
key : 'B',
value : "blue"
},
{
key : 'G',
value : "green"
}
]
}
]).then(answer=>{
console.log(answer);
});
expand
自己可以試試按下 h/H 回車的頁面是啥纹因。
5.4 多選和分隔符
const inquirer = require("inquirer");
inquirer.prompt([
{
type:"checkbox",
message:"選擇一至多種顏色：",
name:"color",
choices:[
{
name : "red"
},
new inquirer.Separator(), // 添加分隔符
{
name : "blue"
},
{
name : "green"
},
{
name : "pink",
checked : true//默認(rèn)
},
new inquirer.Separator("--- 分隔符 ---"), // 自定義分隔符
{
name : "orange"
}
]
}
]).then(answer=>{
console.log(answer);
});
如果不想自定義還可以：
const inquirer = require("inquirer");
inquirer.prompt([
{
type:"checkbox",
message:"選擇一至多種顏色：",
name:"color",
choices:[
"red",
"blue",
"green",
"pink",
"orange"
]
}
]).then(answer=>{
console.log(answer);
});
5.5 密碼
const inquirer = require("inquirer");
inquirer.prompt([
{
type:"password",
message:"請輸入你的密碼：",
name:"pwd"
}
]).then(answer=>{
console.log(answer);
});
5.6 輸入數(shù)字
const inquirer = require("inquirer");
inquirer.prompt([
{
type:"number",
message:"請輸入數(shù)字：",
name:"num"
}
]).then(answer=>{
console.log(answer);
});
5.7 編輯器
使用首選編輯器打開一個臨時文件，用戶退出編輯器后鲫竞，將讀取臨時文件的內(nèi)容辐怕。首選編輯器可以指定逼蒙。
const inquirer = require("inquirer");
inquirer.prompt([
{
type:"editor",
message:"寫下你想寫的東西：",
name:"editor"
}
]).then(answer=>{
console.log(answer);
});
5.8 行數(shù)
用來更改顯示行數(shù)只對list, rawList, expand 或 checkbox有效从绘。
const inquirer = require("inquirer");
inquirer.prompt([
{
type:"checkbox",
message:"選擇一至多種顏色：",
name:"color",
choices:[
"red",
"blue",
"green",
"pink",
"orange"
],
pageSize:1
}
]).then(answer=>{
console.log(answer);
});
只有一行，通過上下方向鍵來選擇：
2019年10月14日23:09:42
