前言

好，經(jīng)過上篇文章的介紹，已經(jīng)可以有處理不同指令的能力了，接下來我們就來處理 vue create 指令，這個指令的本質(zhì)就是從網(wǎng)絡(luò)上下載提前準(zhǔn)備好的模板，然后再自動安裝模板中相關(guān)依賴。

所以實現(xiàn) create 指令分為兩步：

1. 下載指定模板
2. 安裝模板中的依賴

先來看看官方的吧，我在終端中已經(jīng)輸入了 vue create 指令，然后按照提示輸入了項目名稱，然后就會出現(xiàn)下面的提示：

他這個版本好像比較新，我這里就直接以 Vue.2x 為例，在之前的版本呢其實首先是會讓你選擇一個模板的，然后再根據(jù)模板拉取模板，所以我會按照這個思路去寫。

拉取模板名稱

拉取模板名稱的話，首先要面臨的一個問題是，這些模板名稱是從哪里來的呢？這個問題其實很簡單，得要自己去 Git 倉庫中進(jìn)行創(chuàng)建好模板，然后再去拉取，這里我使用的是 GitHub 倉庫，所以我會在 GitHub 倉庫中好需要使用的模板，然后再去拉取。

模板分為兩種，一種是需要編譯的模板，一種是不需要編譯的模板。

在 GitHub 倉庫中創(chuàng)建模板

因為我這里要使用到 GitHub Api，根據(jù) Api 要求只有組織的倉庫才能使用，所以需要在我的賬號中創(chuàng)建一個組織，然后再在組織中創(chuàng)建倉庫。

首先登錄 GitHub，進(jìn)入： https://github.com/settings/organizations ，然后點擊 New organization 創(chuàng)建一個組織：

選擇 Free，點擊 Create a free organization ：

看下圖，根據(jù)我填寫的信息，替換成你自己的信息，然后點擊 Next ：

跳過這一步，點擊 Skip this step ：

到此，我們已經(jīng)創(chuàng)建好了一個組織：

接下來就是在組織中創(chuàng)建一個倉庫了，點擊 Create new repository ：

創(chuàng)建 vue-simple-template 倉庫

這個是一個不需要編譯的模板：

后續(xù)就是根據(jù)給出的指令進(jìn)行操作將提前準(zhǔn)備好的模板上傳到倉庫中即可。

最后附上 vue-simple-template 倉庫地址： https://github.com/neo-it6666/vue-simple-template

當(dāng)然你也可以將這個模板展示到自己組織的 Overview 中，這樣別人就可以看到你的模板了。怎樣設(shè)置呢？首先進(jìn)入到 vue-simple-template 倉庫中，然后點擊 Edit Pins ：

最后效果如下：

好，這個就是不需要編譯的模板，接下來快速將下一個需要編譯的模板創(chuàng)建好。

創(chuàng)建 vue-advanced-template 倉庫

一樣的我這里就快速創(chuàng)了：

貼一個 vue-advanced-template 倉庫地址： https://github.com/neo-it6666/vue-advanced-template

同樣的，你也可以將這個模板展示到自己組織的 Overview 中，這樣別人就可以看到你的模板了。

拉取 GitHub 倉庫中的模板名稱

接下來就是拉取模板名稱了，這個其實很簡單，只需要使用 GitHub Api 就可以了，所以先要給大家介紹一下 GitHub Api。

GitHub Api

GitHub Api 是一個 RESTful 風(fēng)格的 Api，可以用于獲取 GitHub 上的資源，比如倉庫、用戶、組織等等。

GitHub Api 的請求地址是： https://api.github.com ，然后后面跟上你要請求的資源路徑，比如獲取用戶信息的話，請求地址就是： https://api.github.com/users/neo-it6666 。

我這里要獲取的是組織中的倉庫，所以要去文檔中找與 Repositories 相關(guān)的 Api，文檔地址： https://docs.github.com/en

點擊 Repositories ，然后找到 Repositories 中的 List organization repositories ：

通過這么一頓操作過后，找到了 GET /orgs/{org}/repos ，這個 API 主要作用就是列出指定組織的存儲庫。

簡單解釋一下這個請求地址：

• orgs：固定寫死的，表示組織
• org：組織名稱，就是你創(chuàng)建的組織名稱
• repos：這個也是固定寫死的，表示倉庫

我組織叫 neo-it6666 ，所以請求地址就是： https://api.github.com/orgs/neo-it6666/repos 。

先在瀏覽器中輸入這個地址，看看返回的數(shù)據(jù)：

總共有 2 個倉庫，這個就是我們之前創(chuàng)建的兩個倉庫，返回是一個數(shù)組，數(shù)組中的每一項就是一個倉庫的信息，是一個對象。

展開一個倉庫的信息（對象）進(jìn)行查看發(fā)現(xiàn)，里面有一個 name 字段，這個就是倉庫的名稱，所以我們只需要獲取這個字段就可以了。

好，知道了這些信息之后呢鋪墊就差不多了，接下來就是在我們的項目中去拉取模板名稱了。

拉取模板名稱

由于我們要拉取模板名稱，涉及到網(wǎng)絡(luò)請求，所以我們需要安裝一個網(wǎng)絡(luò)請求的庫，這里我使用的是 axios ，所以先安裝 axios ：

npm install axios

改寫 create.js 文件，首先引入 axios ：

const axios = require("axios");

我這里單獨抽取一個函數(shù)用于拉取模板名稱，取名為 fetchRepoList ：

const fetchRepoList = async () => {
    const res = await axios.get('https://api.github.com/orgs/neo-it6666/repos')
    return res;
}

然后在 module.exports 中調(diào)用這個函數(shù)：

module.exports = async (projectName) => {
    const fetchRepoListVar = await fetchRepoList()
    console.log(fetchRepoListVar);
}

然后在終端中輸入 vue create ，然后輸入項目名稱，然后就會看到下面的輸出：

發(fā)現(xiàn)我需要的數(shù)據(jù)在 data 字段中，所以請求的代碼要改一下，我直接通過解構(gòu)賦值的方式取出 data 字段：

const fetchRepoList = async () => {
    const { data } = await axios.get('https://api.github.com/orgs/neo-it6666/repos')
    console.log(data);
    return data;
}

下一步就是拿到了這個數(shù)據(jù)之后，我們要將這個數(shù)據(jù)中的 name 字段取出來，然后展示到終端中，這個就是我們要的模板名稱了。

module.exports = async (projectName) => {
    const fetchRepoListData = await fetchRepoList();
    const templateNames =  fetchRepoListData.map((item) => item.name);
    console.log(templateNames);
}

然后在終端中輸入 vue create ，然后輸入項目名稱，然后就會看到下面的輸出：

到這已經(jīng)完成了拉取模板名稱的功能，但是通過我觀察官方的輸出，他是有下載 loading 的，所以我也想加上這個功能，也就是控制臺的交互，讓用戶知道正在下載模板，告訴用戶我在干事情我在幫你下載中。

添加下載 loading

這個東西其實就是一個動畫，我這里直接使用 ora 這個庫，所以先安裝 ora 。

先來簡單給大家介紹一下 ora 這個庫， ora 是一個用于創(chuàng)建 loading 動畫的庫，可以用于在終端中展示一個 loading 動畫，讓用戶知道程序正在運行中。

官方文檔： https://www.npmjs.com/package/ora

安裝 ora ：

npm install ora

改寫 create.js 文件，引入 ora ：

const ora = require("ora");

然后在 fetchRepoList 函數(shù)中使用 ora ：

const fetchRepoList = async () => {
    const spinner = ora('Loading template list...').start();
    const { data } = await axios.get('https://api.github.com/orgs/neo-it6666/repos')
    spinner.succeed('Template list loaded successfully');
    return data;
}

我先運行一下看看效果，然后在解釋一下 ora 的使用：

發(fā)現(xiàn)報錯了，大致意思是最新版 ora 這個庫使用的是 ES6 模塊 ，要使用 import ，通過我一頓操作與查閱資料，最后采取降低版本的方式來解決該問題。

將 ora 的版本降低到 5.4.0：

npm install [email protected]

然后再運行一下看看效果：

其實這里我應(yīng)該錄制一個動圖的，大家自己去編寫代碼看看效果吧。

最后我總結(jié)一下，因為我 NodeJS 版本為 15.6.0 ，所以 ora 庫的版本要降低到 5.4.0 ，有可能你們的版本和我的不同遇到的場景也不同，所以要根據(jù)自己的情況來做出相應(yīng)的調(diào)整。

通過解決此問題，我也學(xué)到了很多，這并不是解決問題的最佳方法，由于自己的能力有限，所以只能采取這種方式，在日后的學(xué)習(xí)自身的提升中，希望能夠找到更好的解決方案，并解釋出來。

參考資料

• https://blog.csdn.net/lt012345/article/details/131273244