溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
寫在前面：
開始通過npm init 創建package.json的時候就有大量與用戶的交互(當然也可以通過參數來忽略輸入)；而現在大多數工程都是通過腳手架來創建的，使用腳手架的時候最明顯的就是與命令行的交互，如果想自己做一個腳手架或者在某些時候要與用戶進行交互，這個時候就不得不提到inquirer.js了。
零. 介紹
由于交互的問題種類不同，inquirer為每個問題提供很多參數：
上面的屬性(除
transformer外)在下面都有對應使用。
一. 使用
0. 語法結構
const inquirer = require('inquirer');
const promptList = [
// 具體交互內容
];
inquirer.prompt(promptList).then(answers => {
console.log(answers); // 返回的結果
})
1. input
const promptList = [{
type: 'input',
message: '設置一個用戶名:',
name: 'name',
default: "test_user" // 默認值
},{
type: 'input',
message: '請輸入手機號:',
name: 'phone',
validate: function(val) {
if(val.match(/\d{11}/g)) { // 校驗位數
return val;
}
return "請輸入11位數字";
}
}];
效果：
2. confirm
const promptList = [{
type: "confirm",
message: "是否使用監聽？",
name: "watch",
prefix: "前綴"
},{
type: "confirm",
message: "是否進行文件過濾？",
name: "filter",
suffix: "后綴",
when: function(answers) { // 當watch為true的時候才會提問當前問題
return answers.watch
}
}];
效果：
3. list
const promptList = [{
type: 'list',
message: '請選擇一種水果:',
name: 'fruit',
choices: [
"Apple",
"Pear",
"Banana"
],
filter: function (val) { // 使用filter將回答變為小寫
return val.toLowerCase();
}
}];
效果：
4. rawlist
const promptList = [{
type: 'rawlist',
message: '請選擇一種水果:',
name: 'fruit',
choices: [
"Apple",
"Pear",
"Banana"
]
}];
效果：
5. expand
const promptList = [{
type: "expand",
message: "請選擇一種水果：",
name: "fruit",
choices: [
{
key: "a",
name: "Apple",
value: "apple"
},
{
key: "O",
name: "Orange",
value: "orange"
},
{
key: "p",
name: "Pear",
value: "pear"
}
]
}];
效果：
6. checkbox
const promptList = [{
type: "checkbox",
message: "選擇顏色:",
name: "color",
choices: [
{
name: "red"
},
new inquirer.Separator(), // 添加分隔符
{
name: "blur",
checked: true // 默認選中
},
{
name: "green"
},
new inquirer.Separator("--- 分隔符 ---"), // 自定義分隔符
{
name: "yellow"
}
]
}];
// 或者下面這樣
const promptList = [{
type: "checkbox",
message: "選擇顏色:",
name: "color",
choices: [
"red",
"blur",
"green",
"yellow"
],
pageSize: 2 // 設置行數
}];
效果：
7. password
const promptList = [{
type: "password", // 密碼為密文輸入
message: "請輸入密碼：",
name: "pwd"
}];
效果：
8. editor
const promptList = [{
type: "editor",
message: "請輸入備注：",
name: "editor"
}];
效果：
寫在后面：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
