『手撕Vue-CLI』拉取模板名称

vue,cli · 浏览次数 : 0

小编点评

**vue create 指令详解** **步骤 1:拉取模板名称** 1. 使用 `axios` 库获取 GitHub 仓库中的模板名称。 2. 提取模板名称并将其输出到终端。 **步骤 2:创建 Vue 项目** 1. 在终端中运行 `vue create` 命令。 2. 输入项目名称。 3. 等待模板下载并安装完成。 **步骤 3:拉取模板名称** 1. 使用 `fetchRepoList` 函数获取模板名称列表。 2. 打印模板名称。 **步骤 4:显示模板名称** 1. 在终端中使用 `module.exports` 将模板名称导出。 2. 运行 `vue create` 命令,输入项目名称。 3. 看到模板名称输出到终端。 **步骤 5:添加下载进度指示** 1. 使用 `ora` 库创建 loading 动画。 2. 在 `fetchRepoList` 函数中使用 `ora` 创建 loading 动画。 3. 当模板下载完成时,关闭 loading 动画。 **代码示例** ```js const axios = require("axios"); const ora = require("ora"); // 获取模板名称 const fetchRepoList = async () => { const spinner = ora("Loading template list..."); try { const { data } = await axios.get( "https://api.github.com/orgs/neo-it6666/repos" ); spinner.succeed("Template list loaded successfully"); return data; } finally { spinner.close(); } }; // 显示模板名称 const templateNames = await fetchRepoList(); console.log(templateNames); ``` **注意** * 如果您的 NodeJS 版本为 15.6.0 或更高,则需要使用 `ora` 版本 5.4.0 或更高。 * 此代码仅供参考,您可以根据您的需求进行调整。

正文

前言

好,经过上篇文章的介绍,已经可以有处理不同指令的能力了,接下来我们就来处理 vue create 指令,这个指令的本质就是从网络上下载提前准备好的模板,然后再自动安装模板中相关依赖。

所以实现 create 指令分为两步:

  1. 下载指定模板
  2. 安装模板中的依赖

先来看看官方的吧,我在终端中已经输入了 vue create 指令,然后按照提示输入了项目名称,然后就会出现下面的提示:

他这个版本好像比较新,我这里就直接以 Vue.2x 为例,在之前的版本呢其实首先是会让你选择一个模板的,然后再根据模板拉取模板,所以我会按照这个思路去写。

拉取模板名称

拉取模板名称的话,首先要面临的一个问题是,这些模板名称是从哪里来的呢?这个问题其实很简单,得要自己去 Git 仓库中进行创建好模板,然后再去拉取,这里我使用的是 GitHub 仓库,所以我会在 GitHub 仓库中好需要使用的模板,然后再去拉取。

模板分为两种,一种是需要编译的模板,一种是不需要编译的模板。

在 GitHub 仓库中创建模板

因为我这里要使用到 GitHub Api,根据 Api 要求只有组织的仓库才能使用,所以需要在我的账号中创建一个组织,然后再在组织中创建仓库。

首先登录 GitHub,进入:https://github.com/settings/organizations ,然后点击 New organization 创建一个组织:

选择 Free,点击 Create a free organization

看下图,根据我填写的信息,替换成你自己的信息,然后点击 Next

跳过这一步,点击 Skip this step

到此,我们已经创建好了一个组织:

接下来就是在组织中创建一个仓库了,点击 Create new repository

创建 vue-simple-template 仓库

这个是一个不需要编译的模板:

后续就是根据给出的指令进行操作将提前准备好的模板上传到仓库中即可。

最后附上 vue-simple-template 仓库地址:https://github.com/neo-it6666/vue-simple-template

当然你也可以将这个模板展示到自己组织的 Overview 中,这样别人就可以看到你的模板了。怎样设置呢?首先进入到 vue-simple-template 仓库中,然后点击 Edit Pins

最后效果如下:

好,这个就是不需要编译的模板,接下来快速将下一个需要编译的模板创建好。

创建 vue-advanced-template 仓库

一样的我这里就快速创了:

贴一个 vue-advanced-template 仓库地址:https://github.com/neo-it6666/vue-advanced-template

同样的,你也可以将这个模板展示到自己组织的 Overview 中,这样别人就可以看到你的模板了。

拉取 GitHub 仓库中的模板名称

接下来就是拉取模板名称了,这个其实很简单,只需要使用 GitHub Api 就可以了,所以先要给大家介绍一下 GitHub Api。

GitHub Api

GitHub Api 是一个 RESTful 风格的 Api,可以用于获取 GitHub 上的资源,比如仓库、用户、组织等等。

GitHub Api 的请求地址是:https://api.github.com,然后后面跟上你要请求的资源路径,比如获取用户信息的话,请求地址就是:https://api.github.com/users/neo-it6666

我这里要获取的是组织中的仓库,所以要去文档中找与 Repositories 相关的 Api,文档地址:https://docs.github.com/en

点击 Repositories,然后找到 Repositories 中的 List organization repositories

通过这么一顿操作过后,找到了 GET /orgs/{org}/repos,这个 API 主要作用就是列出指定组织的存储库。

简单解释一下这个请求地址:

  • orgs:固定写死的,表示组织
  • org:组织名称,就是你创建的组织名称
  • repos:这个也是固定写死的,表示仓库

我组织叫 neo-it6666,所以请求地址就是:https://api.github.com/orgs/neo-it6666/repos

先在浏览器中输入这个地址,看看返回的数据:

总共有 2 个仓库,这个就是我们之前创建的两个仓库,返回是一个数组,数组中的每一项就是一个仓库的信息,是一个对象。

展开一个仓库的信息(对象)进行查看发现,里面有一个 name 字段,这个就是仓库的名称,所以我们只需要获取这个字段就可以了。

好,知道了这些信息之后呢铺垫就差不多了,接下来就是在我们的项目中去拉取模板名称了。

拉取模板名称

由于我们要拉取模板名称,涉及到网络请求,所以我们需要安装一个网络请求的库,这里我使用的是 axios,所以先安装 axios

npm install axios

改写 create.js 文件,首先引入 axios

const axios = require("axios");

我这里单独抽取一个函数用于拉取模板名称,取名为 fetchRepoList

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

然后在 module.exports 中调用这个函数:

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

然后在终端中输入 vue create,然后输入项目名称,然后就会看到下面的输出:

发现我需要的数据在 data 字段中,所以请求的代码要改一下,我直接通过解构赋值的方式取出 data 字段:

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

下一步就是拿到了这个数据之后,我们要将这个数据中的 name 字段取出来,然后展示到终端中,这个就是我们要的模板名称了。

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

然后在终端中输入 vue create,然后输入项目名称,然后就会看到下面的输出:

到这已经完成了拉取模板名称的功能,但是通过我观察官方的输出,他是有下载 loading 的,所以我也想加上这个功能,也就是控制台的交互,让用户知道正在下载模板,告诉用户我在干事情我在帮你下载中。

添加下载 loading

这个东西其实就是一个动画,我这里直接使用 ora 这个库,所以先安装 ora

先来简单给大家介绍一下 ora 这个库,ora 是一个用于创建 loading 动画的库,可以用于在终端中展示一个 loading 动画,让用户知道程序正在运行中。

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

安装 ora

npm install ora

改写 create.js 文件,引入 ora

const ora = require("ora");

然后在 fetchRepoList 函数中使用 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 的使用:

发现报错了,大致意思是最新版 ora 这个库使用的是 ES6 模块,要使用 import,通过我一顿操作与查阅资料,最后采取降低版本的方式来解决该问题。

ora 的版本降低到 5.4.0:

npm install ora@5.4.0

然后再运行一下看看效果:

其实这里我应该录制一个动图的,大家自己去编写代码看看效果吧。

最后我总结一下,因为我 NodeJS 版本为 15.6.0 ,所以 ora 库的版本要降低到 5.4.0,有可能你们的版本和我的不同遇到的场景也不同,所以要根据自己的情况来做出相应的调整。

通过解决此问题,我也学到了很多,这并不是解决问题的最佳方法,由于自己的能力有限,所以只能采取这种方式,在日后的学习自身的提升中,希望能够找到更好的解决方案,并解释出来。

参考资料

与『手撕Vue-CLI』拉取模板名称相似的内容:

『手撕Vue-CLI』拉取模板名称

前言 好,经过上篇文章的介绍,已经可以有处理不同指令的能力了,接下来我们就来处理 vue create 指令,这个指令的本质就是从网络上下载提前准备好的模板,然后再自动安装模板中相关依赖。 所以实现 create 指令分为两步: 下载指定模板 安装模板中的依赖 先来看看官方的吧,我在终端中已经输入了

『手撕Vue-CLI』拉取版本号

开篇 在上一篇文章中,给 nue-cli 添加了与用户终端交互的功能,这一次来实现一个拉取版本号的功能。 这个功能的背景是,有时候我们在使用脚手架的时候,不同版本的脚手架可能会有不同的功能,所以用户有可能会根据自己的需求选择不同的版本,所以这里将会实现一个根据用户选择的版本号,拉取对应的版本号的模板

『手撕Vue-CLI』添加终端用户交互

前言 经过上一篇文章的梳理,实现了可以从 GitHub 上拉取模板项目名称,已经可以得知可使用的模板有哪些了,那么我觉得是不是要进行选择呢?所以这一篇文章就来实现终端用户交互,让用户可以自己选择想要使用的模板。 实现 在 NodeJS 当中,已经有人为我们封装好了一个库,叫做 inquirer,可以

『手撕Vue-CLI』函数柯里化优化代码

开篇 在上一篇文章中,给 nue-cli 添加了拉取版本号的功能,这一次来优化一下代码,使用函数柯里化的方式来优化代码。 实现 函数柯里化 函数柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。 在进行改写之前,首先给大家简单介绍一下函数柯里化,写一个简单的例子来演示一下。

『手撕Vue-CLI』完善提示信息

前言 经过『手撕Vue-CLI』自动安装依赖,已经实现了自动安装依赖的功能。 然而,虽然项目已复制并安装依赖,但其提示信息并不够友好,于是我试着去运行了一下vue create,发现其提示信息是这样的: 于是我决定完善提示信息,也借此机会完善一下项目的代码,变量命名等。 完善提示信息 完善变量命名

『手撕Vue-CLI』自动安装依赖

开篇 经过『手撕Vue-CLI』拷贝模板,实现了自动下载并复制指定模板到目标目录。然而,虽然项目已复制,但其依赖并未自动安装,可能需要用户手动操作,这并不够智能。 正如前文所述,我们已经了解了业务需求和背景。那么,接下来我们将直接深入探讨核心实现细节。 自动安装依赖 在前文中,我们已经将模板文件复制

『手撕Vue-CLI』拷贝模板

开篇 经过上篇文章的介绍,实现了可以根据用户选择的模板名称加上对应的版本号,可以下载对应的模板,并且将下载之后的文件存放在用户目录下的 .nue-template文件夹中。 接下来这篇文章主要实现内容是将下载的模板文件拷贝到当前所执行命令的目录下。 拷贝模板 例如我现在在终端当中输入 nue-cli

『手撕Vue-CLI』下载指定模板

开篇 经上篇文章的介绍,实现了获取下载目录地址,接下来实现下载指定模板的功能。 背景 通过很多章节过后,已经可以拿到模板名称,模板版本号,下载目录地址,这些信息都是为了下载指定模板做准备的。 实现 如何从 GitHub 下载模板 可以借助 download-git-repo 这个库来下载 GitHu

『手撕Vue-CLI』获取下载目录

开篇 在上一篇文章中,简单的对 Nue-CLI 的代码通过函数柯里化优化了一下,这一次来实现一个获取下载目录的功能。 背景 在 Nue-CLI 中,我现在实现的是 create 指令,这个指令本质就是首先拿到模板名称和版本号之后,然后去进行下载对应的模板,关于下载那么肯定要面临的问题就是如何下载?下

『手撕Vue-CLI』处理不同指令

前言 在上一篇『手撕Vue-CLI』添加自定义指令中,已经实现了自定义指令的添加,但是指令还是比较简单的,只是简单的打印一句话,那么在实际运用场景中,可能会有更多的需求,比如可能需要在指令中传递参数,或者需要在指令中进行一些复杂的操作,那么这个时候我们就需要对指令进行处理了。 创建指令处理文件 在上