前言
在开发项目时，你是否遇到过这种烦人的场景：
每新增一个模块，就得重复创建一堆类似的文件、复制内容、改名字、调变量……
我在用 Vue3 的 Vben Admin 项目时深有体会。比如新增一个 Table 模块（如用户管理、订单管理），通常要这样操作：
- src/views/user
├─ index.vue
├─ user.data.ts
├─ useTable.ts
├─ usermodal.vue
└─ types.ts
- src/views/order
├─ index.vue
├─ order.data.ts
├─ useTable.ts
├─ ordermodal.vue
└─ types.ts
手动创建 + 修改变量名，真是又烦又耗时。
于是我决定动手写一个 Node.js 脚手架工具 —— quick-gen-file，一行命令就能自动生成这些模板文件，彻底解放我的双手！
脚手架功能亮点
- ✅ 命令行交互式操作，避免死记参数
- ✅ 支持自定义模板，灵活适配不同项目结构
- ✅ 基于
qg-config.json动态配置生成规则 - ✅ 集成 EJS / Mustache 模板引擎，变量可编程替换
快速上手
安装
npm install quick-gen-file
生成一个 Vue 页面模块
qg add-vuepage test -d src/views/system
自动生成的结构如下：
src/views/system
├─ test.vue
当然这只是最简单的示例。quick-gen-file 更强大的地方在于——支持完全自定义生成模板和命令。
自定义命令 + 模板配置
运行初始化命令：
qg init
会在项目根目录生成：
qg-template/ // 模板目录
qg-config.json // 脚手架配置文件
示例 qg-config.json：
{
"commands": [
{
"name": "add-my-page",
"description": "自定义添加页面命令，例如：qg add-my-page pageA",
"askForName": true,
"templates": [
{
"templatePath": "qg-template/test/data.ejs",
"output": "src/views/test_qg_page/{{name}}",
"filename": "{{name}}.ts"
},
{
"templatePath": "qg-template/test/vue2.vue",
"output": "src/views/test_qg_page/{{name}}",
"filename": "{{capitalizeName}}vue2.vue"
},
{
"templatePath": "qg-template/test/vue3.ejs",
"output": "src/views/test_qg_page/{{name}}",
"filename": "{{capitalizeName}}vue3.vue"
}
]
}
]
}
模板文件内容支持变量渲染，例如 vue3.ejs：
<template>
<div class="<%= lowerName %>">
<h2><%= lowerName %></h2>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "<%= name %>",
setup() {
return {};
},
});
</script>
<style scoped></style>
然后运行：
qg add-my-page test
将会生成如下结构：
- src/views/test_qg_page/test
├─ Testvue2.vue // Vue 2 页面
├─ test.ts // 数据文件
├─ Testvue3.vue // Vue 3 页面
内容中涉及的变量（如 test、Test 等）都将自动替换，无需手动调整。
手动 vs 脚手架
| 操作 | 手动创建 | quick-gen-file 脚手架 |
|---|---|---|
| 创建 1 个模块 | 5 分钟 | ⏱️ 2 秒 |
| 保证代码结构统一 | ❌ 易出错 | ✅ 模板自动生成 |
| 支持多项目结构差异 | ❌ 重复改配置 | ✅ 模板 + 配置搞定 |
总结 & 源码地址
这个脚手架工具已经成为我 Vue 项目开发中的提效神器。现在新增模块、统一代码结构都变得极其高效。
📌 GitHub 地址： github.com/yydongwang/…
如果你也被重复创建文件折磨，不妨试试 quick-gen-file，
也欢迎在评论区分享你是如何解决类似问题的！💬
