前言
經過『手撕Vue-CLI』自動安裝依賴，已經實現了自動安裝依賴的功能。
然而，雖然專案已複製並安裝依賴，但其提示資訊並不夠友好，於是我試著去執行了一下vue create，發現其提示資訊是這樣的：
於是我決定完善提示資訊，也藉此機會完善一下專案的程式碼，變數命名等。
完善提示資訊
完善變數命名
首先將之前寫死的 destPath 刪除掉，用 downloadTemplate 函式的返回值代替, 更名為 sourcePath。
我開啟了 IDEA 的 diff 工具，對比了一下兩個版本的程式碼，讓大家看一下變化。
抽取 path.resolve(projectName) 為變數
完善 Creating project 提示資訊
接下來的內容就是我會參考官方的提示詞來完善提示資訊。
當我執行 create 命令時，官方會告訴我們所建立專案最終的路徑，那我也來完善一下。
console.log(`✨ Creating project in ${destPath}`)
完善 downloading template 提示資訊
接下來是完善下載模板的提示資訊，其它的內容沒有改變。
console.log(`🗃 Initializing git repository...`);
完善安裝依賴提示資訊
接下來是完善安裝依賴的提示資訊，其它的內容沒有改變。
console.log(`📦 Installing additional dependencies...`);
完善建立成功提示資訊
接下來是完善建立成功的提示資訊，分別告訴使用者所建立專案的專案名，該如何啟動專案。
console.log(` Successfully created project ${projectName}`);
console.log(` Get started with the following commands:`);
console.log(` $ cd ${projectName}`);
console.log(` $ npm run serve`);
到此為止，提示資訊可以說算是完善了，接下來走一遍流程看看效果，測試過程中並不是一帆風順，控制檯報錯了：
The "path" argument must be of type string. Received an instance of Promise
出現這個錯誤的原因是 ncp 模組在處理路徑時接收到一個 Promise 物件，而不是一個字串路徑，我就一下定位到了這個問題，發現是因為非同步操作沒有正確處理，導致傳遞給 ncp 的引數不是預期的字串型別，downloadTemplate 函式返回的是一個 Promise 物件，所以我需要在呼叫 downloadTemplate 函式時，使用 await 關鍵字等待其返回結果。
這下執行進行測試，就沒問題了，正常執行：
我在測試過程中出現過：connect ETIMEDOUT 20.205.243.166:443，這個錯誤是因為網路問題，我這裡是因為網路問題導致的，不過不影響我們的測試，重試一下就好了。
最後的結果出來了，所建立的專案建立完成了，提示資訊也完善了，最後安裝依賴報錯了，那就來解決一下。
這個問題是由於在嘗試從 https://registry.npm.taobao.org 下載依賴包時，證書過期導致無法建立安全連線，所導致的。
使用其他源，執行：
npm config set registry https://registry.npmmirror.com
或臨時忽略SSL證書，作為臨時解決方案，可以嘗試忽略 SSL 證書錯誤（不推薦在生產環境中使用）：
npm config set strict-ssl false
配置好這些之後就可以將安裝依賴時所報的錯誤給解決掉了。
附上一張最終的效果圖：
chalk
在完善提示資訊的過程中，我發現了一個很好用的庫，那就是 chalk，它可以讓我們在控制檯輸出不同顏色的文字，讓我們的提示資訊更加醒目。
npm：https://www.npmjs.com/package/chalk
安裝
我這裡不採用最新版本，我想使用 require 引入，而最新版本的 chalk 使用的是 ES6 的模組化語法，所以我這裡安裝 4.1.0 版本。
npm install chalk@4.1.0
使用
匯入 chalk 模組：
const chalk = require('chalk');
然後就可以使用 chalk 提供的方法了，比如將 Creating project in 改為綠色，destPath 改為紅色：
console.log(chalk.green(`✨ Creating project in ${chalk.red(destPath)}`));
這樣就可以讓我們的提示資訊更加醒目了。
繼續改一下其它的提示資訊：
- 1.將下載使用者選擇的模板提示資訊改為綠色
console.log(chalk.green(`🗃 Initializing git repository...`));
- 2.將安裝相關依賴提示資訊改為綠色
console.log(chalk.green(`📦 Installing additional dependencies...`));
- 3.將建立成功提示資訊改為綠色
console.log(chalk.green(` Successfully created project ${projectName}`));
console.log(chalk.green(` Get started with the following commands:`));
- 4.將指引使用者如何啟動專案的提示資訊改為 magenta 顏色
console.log(chalk.magenta(` $ cd ${projectName}`));
console.log(chalk.magenta(` $ npm run serve`));
改完之後，再次測試一下，效果如下：
這樣就可以讓我們的提示資訊更加醒目了。