支持列表页、详情页、表单页等常见管理后台页面形态。
面向 Swagger 文档的 Vue 页面生成工作台
把重复页面搭建工作，压缩成一次配置和一次生成。
`create-page-common` 是一套围绕 Swagger 文档构建的 Vue 页面代码生成工具， 支持批量生成列表页、详情页、表单页、API、路由与 mock 文件，并通过模板和配置机制适配你的项目结构，让前端更快进入真实业务开发。
1. 输入 Swagger
读取在线文档或离线源码，自动整理接口、字段与分组信息。
2. 配置页面结构
在可视化界面里选择列表项、检索项、表单控件、验证规则与组件属性。
3. 一次性生成
输出视图、路由、API、mock 等文件，并尽量保持与目标项目代码风格一致。
产品概览
`create-page-common` 面向常见的后台管理页面开发流程，重点解决“页面重复搭建多、字段配置繁琐、模板风格难统一”的问题。
内置 Vue2 / Vue3 模板目录，覆盖 Element UI 与 Element Plus 方案。
初始化后可复用缓存，重复生成时不需要每次重新整理项目信息。
核心能力
这不是单纯“生成页面文件”，而是一套围绕接口文档、模板目录和目标项目结构做协同的生成流程。
Swagger 驱动
从接口文档中读取字段、名称、类型与分组，减少手工录入和复制粘贴。
页面配置可视化
列表项、检索项、表单控件、校验规则、组件属性都可以在界面中调整。
模板体系开放
基于 art-template，可按项目约定改写输出结构，而不是被固定模板锁死。
增量生成
API 和路由支持按需更新，减少对已有项目结构的整体冲击。
组件自动注入
根据实际使用的表单组件生成 import 与注册代码，保持输出更干净。
多种扩展入口
可以新增 UI 框架分组、扩展表单组件、调整 mock 规则与模板函数。
最常见的使用场景
如果你的后台系统页面结构重复度很高，这套工具的收益会更明显。
后台 CRUD 页面快速搭建
列表、查询、详情、表单是最典型场景。尤其当接口字段已经在 Swagger 中维护时，生成效率提升会非常直接。
统一团队页面结构
当团队希望统一目录结构、网络请求写法、路由风格与表单控件习惯时，模板化生成更容易落标准。
已有项目二次接入
可以根据目标项目路径与请求封装方式调整配置，让生成结果更贴近当前项目，而不是强行推翻原结构。
自研生成平台的底层能力
如果你想做自己的代码生成工具，可以直接复用 npm 核心能力，节省底层文件生成与解析工作。
快速配置示例
下面的示例展示了最常用的配置入口，便于快速理解生成器的输出边界和目标项目接入方式。
文件生成开关
const config = {
makeFile: {
isMakeView: true,
isMakeApi: true,
isMakeRouter: true,
isMakeMock: false
}
};
注释说明：先决定要不要生成视图、API、路由和 mock，这会直接影响最终写入到目标项目中的文件范围。
目标项目路径
const config = {
projectPath: {
httpFile: "@/apis/request.js",
routerFile: "src/router/index.js",
routerMatchMark: "@/views/"
}
};
注释说明：这里决定生成器怎样定位你的请求文件、路由文件和页面目录，是接入现有项目时最先需要确认的配置。
关联组件
除了主产品 `create-page-common`，还有两个关联组件分别承担底层生成和轻量 mock 能力。
create-vue-page-npm
这是 `create-page-common` 的底层生成能力之一，负责视图、API、路由和 mock 文件的核心生成逻辑，适合在脚本或内部平台中复用。
vite-plugin-mock-mini
这是一个轻量 mock 相关组件，用于在 Vite 场景下更方便地组织和使用 mock 能力，适合与生成后的前端项目配合使用。
真实界面预览
以下截图来自现有工具界面，用来帮助理解配置流程与交互方式。
初始化项目
输入 Swagger 地址和目标项目根目录，完成首次解析与项目绑定。
选择接口与页面类型
按接口分组挑选目标 API，并切换列表页、详情页、表单页等输出形态。
配置验证规则
对字段的 required、trigger、type 等规则做可视化补充。
适合这套工具的项目，不是“所有前端项目”，而是“接口文档完整、后台页面重复度高、希望统一页面结构”的项目。