介绍
vue-cli-plugin-zfs-plop 是一个 Vue CLI3 插件，它提供了一个基础的脚手架配置和一个 Plop 模板，用于更快地生成 Vue 单文件组件、Vuex 模块和 API 接口等代码。使用此插件可以极大地提高开发效率，减少重复劳动。
安装
使用 npm 安装 vue-cli-plugin-zfs-plop 插件：
npm install --save-dev vue-cli-plugin-zfs-plop
或者使用 yarn 安装：
yarn add --dev vue-cli-plugin-zfs-plop
使用
安装完毕后，在 Vue 项目根目录下运行以下命令，即可生成脚手架目录：
vue invoke zfs-plop
你也可以使用以下命令，添加到已有的 Vue 项目中：
vue add zfs-plop
生成文件
使用 vue-cli-plugin-zfs-plop 插件，可以快速生成如下文件：
生成 Vue 单文件组件
使用以下命令，即可生成一个 Vue 单文件组件：
npm run gen:view
示例：
# 输入 ComponentName components/Test # 生成文件 src/views/components/Test/ComponentName.vue
生成 Vuex 模块
使用以下命令，即可生成一个 Vuex 模块：
npm run gen:vuex
示例：
# 输入 moduleName # 生成文件 src/store/modules/moduleName.js
生成 API 接口
使用以下命令，即可生成一个 API 接口：
npm run gen:api
示例：
# 输入 apiName apiPath # 生成文件 src/services/apiName.js
自定义 Plop 模板
若您想定制自己的 Plop 模板，您可以在项目的根目录下创建一个名为 zfs-plop-templates 的文件夹，此文件夹中存放的文件即为您自定义的 Plop 模板。每一个文件夹即为一个 Plop 模板。
例如：
zfs-plop-templates // 自定义 Plop 模板目录
|-- componentName
|-- componentName.hbs // 模板文件
|-- componentName.spec.js // 模板文件使用以下命令，即可使用自定义的 Plop 模板生成文件：
npm run gen -- --plopfile zfs-plop-templates/componentName/index.js
总结
通过 vue-cli-plugin-zfs-plop 插件，我们可以很方便地生成常用的前端代码文件，提高开发效率，减少重复劳动。与此同时，我们可以通过自定义 Plop 模板，定制适合自己项目的代码结构。
如果您有任何疑问或建议，欢迎通过 issues 与我分享。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067356890c4f7277583c0f