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

vue,cli · 浏览次数 : 0

小编点评

前言 本文主要讨论了如何完善 Vue CLI 项目的创建和安装依赖过程中的提示信息。通过改进提示信息,可以提高用户在创建项目过程中的体验。本文首先介绍了项目的背景,然后详细描述了如何完善各个提示信息,包括删除死板的字符串、使用变量命名、完善创建项目、下载模板、安装依赖、创建成功以及启动项目的提示信息。最后,本文还提供了一个改进后的效果图,并简要介绍了 chalk 库的使用。 1. 完善提示信息 在完善 Vue CLI 项目的创建和安装依赖过程中,提示信息是非常重要的。本文首先将之前写死的 destPath 删除掉,用 downloadTemplate 函数的返回值代替,并更名为 sourcePath。接着,对比了两个版本的代码,展示了变化。 2. 创建项目 在完善创建项目的提示信息方面,本文参考了官方的提示词来改进提示信息。当执行 create 命令时,官方会告诉我们所创建项目最终的路径。本文也完善了这个提示信息,告诉用户所创建项目的项目名,以及如何启动项目。 3. 下载模板 本文完善了下载模板的提示信息,使其更加醒目。同时,本文还提供了一个改进后的效果图,以展示改进后的提示信息效果。 4. 安装依赖 本文完善了安装依赖的提示信息,使其更加醒目。此外,本文还解决了在尝试从特定源下载依赖包时出现的证书过期问题。 5. 创建成功 本文完善了创建成功的提示信息,告诉用户所创建项目的项目名,以及如何启动项目。同时,本文还使用了 chalk 库来让提示信息更加醒目。 6. 启动项目 本文完善了指引用户如何启动项目的提示信息,将其改为 maven 颜色,使其更加醒目。 7. 使用 chalk 库 本文简要介绍了 chalk 库的使用方法,包括如何安装和引入。通过使用 chalk 库,我们可以让提示信息更加醒目,提高用户体验。 总结 本文通过改进 Vue CLI 项目的创建和安装依赖过程中的提示信息,提高了用户在创建项目过程中的体验。本文详细描述了如何完善各个提示信息,包括删除死板的字符串、使用变量命名、完善创建项目、下载模板、安装依赖、创建成功以及启动项目的提示信息。最后,本文还提供了一个改进后的效果图,并简要介绍了 chalk 库的使用。

正文

前言

经过『手撕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`));

改完之后,再次测试一下,效果如下:

这样就可以让我们的提示信息更加醒目了。

与『手撕Vue-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』函数柯里化优化代码

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

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

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

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

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

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

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

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

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