自动生成组件代码—— Vue CLI 插件开发实战

自动生成组件代码—— Vue CLI 插件开发实战

前言

近期工作的过程中跟 Vue CLI 的插件打交道比较多，想了想自己在学校写项目的时候最烦的就是项目创建之后手动创建组件/页面和配置路由，于是突发奇想决定写一个脚手架的插件，自动实现创建组件/页面和配置路由的功能。

本文会一步一步教你如何编写一个自己的 Vue CLI 插件，并发布至 npm，为所有因为这个问题而烦恼的同学解放双手。

关注 「Hello FE」 获取更多实战教程，正好最近在抽奖，查看历史文章即可获取抽奖方法~

本教程的插件完整代码放在了我的 GitHub 上，欢迎大家 Star：vue-cli-plugin-generators

同时，我也将这个插件发布到了 npm，大家可以直接使用 npm 安装并体验添加组件的能力。

PS：添加页面和配置路由的能力还在开发中

体验方式：

1. 通过 npm 安装

npm install vue-cli-plugin-generators -D
vue invoke vue-cli-plugin-generators
复制代码

1. 通过 yarn 安装

yarn add vue-cli-plugin-generators -D
vue invoke vue-cli-plugin-generators
复制代码

1. 通过 Vue CLI 安装（推荐）

vue add vue-cli-plugin-generators
复制代码

注意：一定要注意是复数形式的 generators，不是单数形式的 generator，generator 被前辈的占领了。

废话不多说，我们直接开始吧！

前置知识

要做好一个 Vue CLI 插件，除了要了解 Vue CLI 插件的开发规范之外，我们还需要了解几个 npm 包：

• chalk 让你的控制台输出好看一点，为文字或背景上色
• glob 让你可以使用 Shell 脚本的方式匹配文件
• inquirer 让你可以使用交互式的命令行来获取需要的信息

主要出现的 npm 包就只有这三个，其他的都是基于 Node.js 的各种模块，比如 fs 和 path，了解过 Node.js 的同学应该不陌生。

项目初始化

创建一个空的文件夹，名字最好就是你的插件的名字。

这里我的名字是 vue-cli-plugin-generators，你可以取一个自己喜欢的名字，不过最好是见名知义的那种，比如 vue-cli-plugin-component-generator 或者 vue-cli-plugin-page-generator，一看就知道是组件生成器和页面生成器。

至于为什么一定要带上 vue-cli-plugin 的前缀这个问题，可以看一下官方文档：命名和可发现性。

然后初始化我们的项目：

npm init
复制代码

输入一些基本的信息，这些信息会被写入 package.json 文件中。

创建一个基本的目录结构：

.
├── LICENSE
├── README.md
├── generator
│   ├── index.js
│   └── template
│       └── component
│           ├── jsx
│           │   └── Template.jsx
│           ├── sfc
│           │   └── Template.vue
│           ├── style
│           │   ├── index.css
│           │   ├── index.less
│           │   ├── index.sass
│           │   ├── index.scss
│           │   └── index.styl
│           └── tsx
│               └── Template.tsx
├── index.js
├── package.json
├── src
│   ├── add-component.js
│   ├── add-page.js
│   └── utils
│       ├── log.js
│       └── suffix.js
└── yarn.lock
复制代码

目录结构创建好了之后就可以开始编码了。

目录解析

一些不重要的文件就不讲解了，主要讲解一下作为一个优秀的 Vue CLI 插件，需要哪些部分：

.
├── README.