持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第27天，点击查看活动详情

十五、美化终端提示色

引言

这里开始新的学习系列，动手搭建一个属于自己的 vue 脚手架

主要以 vue 官方的 vue cli 作为参考和学习

方便自己在后续创建 vue 项目时，不必总是复制粘贴

清空控制台

上一节，我们清空了 终端 TTY 的其他信息，并且将光标放到 首行

这一节，我们来 美化 我们的 终端 TTY 提示信息

疑问

什么是 美化终端提示信息 呢？

我们还是先来看一下 vue cli 中的 --hlep 命令的 提示信息，如下图

可以看到，它的最后一行，出现 蓝色 字体

以及 vue cli 创建项目的 命令 vue create aaa ，如下图

也可以看到 首行，也有 蓝色 字体的提示信息

实现

这种 蓝色 字体是如何实现的呢？

在 lib\core\eventListener.js 文件中，我们之前在 监听指令 这篇文章中，通过 program.on() 方法来监听 --help 指令

现在我们给这个方法加上与 vue cli 一样，在最后出现蓝色信息提示

chalk 库

此时需要我们再安装一个库 chalk ，不过安装的时候要注意，新版的 chalk 不支持 require 的方式引入，

会给出错误的提示：Error [ERR_REQUIRE_ESM]

解决办法有两个，取任意一个即可：

• 第一种：我们通过按照旧一点的版本即可 npm i chalk@4.1.0

• 第二种：我们在 package.json 中，添加 "type":"module",

处理这个文件下的 addHelp 方法

const addHelp = (program) => {
  program.on('--help', () => {
    console.log('')
    console.log(`  Run ${chalk.cyan(`wzms-cli <command> --help`)} for detailed usage of given command.`)
    console.log('')
  })
}

输入命令 wzms-cli --help

可以成功的展示了我们的 美化后的信息

总结

我们美化了在 终端 TTY 环境下的 提示信息，产生不同颜色，更容易聚焦重点信息