本文附完整源码与可运行脚手架，开箱即用。
中后台 80% 的需求都是“列表 + 表单”。与其一遍遍复制粘贴，不如把重复工程化：我做了一个“能自己长页面”的前端脚手架——React + Vite + TypeScript + Ant Design，配一份极简 Node 代码生成器。你只需一条命令，就能自动生成列表页、弹窗表单、Service、路由、左侧菜单，无后端也能跑（默认本地存储 Mock）。
为什么做它？
- 提效刚需：从字段到可用页面，耗时从小时级降到秒级。
- 工程友好：类型安全、约束明确、结构清晰，便于团队二次开发。
- 演示与面试利器：展示前端“工程化与抽象能力”的最好材料。
技术选型
- React + Vite + TypeScript：开发体验与类型安全兼顾
- Ant Design：中后台最佳实践
- 轻量生成器
scripts/gen.js：无模板引擎依赖，易读好改
项目结构
src/
api/ # 数据层（内置 localStorage Mock）
modules/ # 生成的业务模块（列表+表单+service+types）
pages/ # 非 CRUD 页
utils/ # 工具函数
routes.tsx # 路由与菜单（生成器自动插入）
scripts/
gen.js # 代码生成器
5 秒生成一个完整模块
node scripts/gen.js --name book --fields title:string,price:number,publishedAt:date
自动产出：
src/modules/book/List.tsx（表格 + 弹窗表单）src/modules/book/service.ts（CRUD 数据访问，默认 Mock）src/modules/book/types.ts（TS 类型）- 自动写入
routes.tsx的路由与侧边菜单
字段类型与控件映射（可自定义）：
string→<input />number→<input type="number" />boolean→<input type="checkbox" />date→<input type="date" />
快速开始
-
解压并安装依赖：
pnpm i（或npm i） -
启动开发：
pnpm dev（默认 http://localhost:5173） -
访问内置示例：
/user -
继续生成你的模块：
node scripts/gen.js --name order --fields orderNo:string,amount:number,paid:boolean,paidAt:date
可扩展点（按需增强）
- 接入真实后端：把
src/api/client.ts的本地存储 Mock 改为axios请求，保持list/create/update/remove签名一致即可无缝切换。 - 增强搜索/分页：在生成的
List.tsx中添加顶部搜索表单与服务端分页参数，与你的 API 对齐。 - 字段元信息：给生成器增加
title、rules、component等元数据，让表单与列渲染更智能。 - 批量生成：把数据表结构（JSON/CSV）喂给
gen.js，一次性生成多个模块。
为什么它适合“真正的企业场景”？
- 统一规范（TS 类型、代码组织、接口约定）
- 低耦合模板（每个模块自包含，便于定位与重构）
- 工程化脚手架（把“复制粘贴”升级为“声明式生成”）
如果你长期维护中后台，这个脚手架会大幅减少机械劳动，把时间留给真正的复杂业务。
你将获得什么？
- 一套可跑、可扩展的前端脚手架
- 一个能量产页面的轻量生成器
- 一篇可直接发布的技术博客与爆款标题
使用说明（简版）
-
已内置示例模块：
/user -
继续生成：
node scripts/gen.js --name product --fields name:string,price:number,inStock:boolean -
想接入后端：改
src/api/client.ts为 axios 调用即可。
地址 github.com/huanhunmao/… 点个star 再走呗 多谢 哈哈
