『手撕Vue-CLI』新增終端使用者互動

BNTang發表於2024-05-27
Vue

前言

經過上一篇文章的梳理，實現了可以從 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 方法中呼叫 inquirer 的 prompt 方法，prompt 方法接收一個陣列引數，陣列中的每一項就是物件，物件的屬性就是設計到使用者與終端的互動型別配置等等，這裡我就不一一介紹了，大家可以參考官方文件，這裡我只介紹一些常用的屬性。

  • type：表示互動的型別，有很多種，比如 input、confirm、list、rawlist、expand、checkbox、password、editor;
  • 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 屬性就是儲存當前問題回答的變數，這裡我就命名為 repo，message 屬性就是問題的描述，這裡我就寫為 Please choose a template to create project，choices 屬性就是列表選項，可以將透過 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，然後透過這個庫來實現使用者選擇想要使用的模板，這樣就可以根據使用者的選擇來拉取對應的模板專案了。

在以後大家開發專案的時候，如果需要實現終端使用者互動的話，可以使用這個庫，它的使用方式也是非常簡單的，只需要呼叫它的方法，然後傳入一些配置就可以了。

本章要介紹的內容不是很多，但是這都是一個一個的小步驟，每一步都是一個進步，不要著急，慢慢來，一步一步的來，這樣才能更好的掌握知識。

相關文章