前言

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

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

1. 下載指定模板
2. 安裝模板中的依賴(lài)

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

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

拉取模板名稱(chēng)

拉取模板名稱(chēng)的話，首先要面臨的一個(gè)問(wèn)題是，這些模板名稱(chēng)是從哪里來(lái)的呢？這個(gè)問(wèn)題其實(shí)很簡(jiǎn)單，得要自己去 Git 倉(cāng)庫(kù)中進(jìn)行創(chuàng)建好模板，然后再去拉取，這里我使用的是 GitHub 倉(cāng)庫(kù)，所以我會(huì)在 GitHub 倉(cāng)庫(kù)中好需要使用的模板，然后再去拉取。

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

在 GitHub 倉(cāng)庫(kù)中創(chuàng)建模板

因?yàn)槲疫@里要使用到 GitHub Api，根據(jù) Api 要求只有組織的倉(cāng)庫(kù)才能使用，所以需要在我的賬號(hào)中創(chuàng)建一個(gè)組織，然后再在組織中創(chuàng)建倉(cāng)庫(kù)。

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

選擇 Free，點(diǎn)擊 Create a free organization ：

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

跳過(guò)這一步，點(diǎn)擊 Skip this step ：

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

接下來(lái)就是在組織中創(chuàng)建一個(gè)倉(cāng)庫(kù)了，點(diǎn)擊 Create new repository ：

創(chuàng)建 vue-simple-template 倉(cāng)庫(kù)

這個(gè)是一個(gè)不需要編譯的模板：

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

最后附上 vue-simple-template 倉(cāng)庫(kù)地址： https://github.com/neo-it6666/vue-simple-template

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

最后效果如下：

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

創(chuàng)建 vue-advanced-template 倉(cāng)庫(kù)

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

貼一個(gè) vue-advanced-template 倉(cāng)庫(kù)地址： https://github.com/neo-it6666/vue-advanced-template

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

拉取 GitHub 倉(cāng)庫(kù)中的模板名稱(chēng)

接下來(lái)就是拉取模板名稱(chēng)了，這個(gè)其實(shí)很簡(jiǎn)單，只需要使用 GitHub Api 就可以了，所以先要給大家介紹一下 GitHub Api。

GitHub Api

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

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

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

點(diǎn)擊 Repositories ，然后找到 Repositories 中的 List organization repositories ：

通過(guò)這么一頓操作過(guò)后，找到了 GET /orgs/{org}/repos ，這個(gè) API 主要作用就是列出指定組織的存儲(chǔ)庫(kù)。

簡(jiǎn)單解釋一下這個(gè)請(qǐng)求地址：

• orgs：固定寫(xiě)死的，表示組織
• org：組織名稱(chēng)，就是你創(chuàng)建的組織名稱(chēng)
• repos：這個(gè)也是固定寫(xiě)死的，表示倉(cāng)庫(kù)

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

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

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

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

好，知道了這些信息之后呢鋪墊就差不多了，接下來(lái)就是在我們的項(xiàng)目中去拉取模板名稱(chēng)了。

拉取模板名稱(chēng)

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

npm install axios

改寫(xiě) create.js 文件，首先引入 axios ：

const axios = require("axios");

我這里單獨(dú)抽取一個(gè)函數(shù)用于拉取模板名稱(chēng)，取名為 fetchRepoList ：

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

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

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

然后在終端中輸入 vue create ，然后輸入項(xiàng)目名稱(chēng)，然后就會(huì)看到下面的輸出：

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

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

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

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

然后在終端中輸入 vue create ，然后輸入項(xiàng)目名稱(chēng)，然后就會(huì)看到下面的輸出：

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

添加下載 loading

這個(gè)東西其實(shí)就是一個(gè)動(dòng)畫(huà)，我這里直接使用 ora 這個(gè)庫(kù)，所以先安裝 ora 。

先來(lái)簡(jiǎn)單給大家介紹一下 ora 這個(gè)庫(kù)， ora 是一個(gè)用于創(chuàng)建 loading 動(dòng)畫(huà)的庫(kù)，可以用于在終端中展示一個(gè) loading 動(dòng)畫(huà)，讓用戶知道程序正在運(yùn)行中。

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

安裝 ora ：

npm install ora

改寫(xiě) 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;
}

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

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

將 ora 的版本降低到 5.4.0：

npm install [email protected]

然后再運(yùn)行一下看看效果：

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

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

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

參考資料

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