OpenAPI Vue Generator
一个强大的 VSCode 扩展，可以从 OpenAPI 3.1 规范自动生成完整的 Vue 3 页面代码。
功能特性
✨ 自动代码生成
- 从 OpenAPI 规范自动识别接口类型（查询、添加、编辑、删除）
- 生成完整的 Vue 3 组件代码
- 自动生成 TypeScript 类型定义
- 自动生成 API 接口调用函数
- 自动生成表单、表格、搜索表单配置
🎯 智能识别
- 自动识别查询列表接口（包含 "query" 和 "list" 的路径）
- 自动识别添加接口（包含 "add" 的路径）
- 自动识别编辑接口（包含 "edit" 的路径）
- 自动识别删除接口（包含 "delete" 的路径）
📦 生成的文件
index.vue - 主 Vue 组件文件api/index.ts - API 接口调用函数@types/index.d.ts - TypeScript 类型定义config/enum.ts - 枚举配置
🔧 灵活配置
- 支持从在线 URL 获取 OpenAPI 规范
- 自定义模块名称和输出目录
- 自动推断表单控件类型（input、select、radio、checkbox、datePicker）
使用方法
1. 打开扩展面板
在 VSCode 左侧活动栏中找到 "OpenAPI Generator" 图标，点击打开。
2. 输入信息
- 模块名称：输入要生成的模块名称（默认为
generator-vue）
- OpenAPI 文档 URL：输入 OpenAPI 规范的 URL 地址
3. 生成代码
点击"生成 Vue 页面"按钮，扩展会自动：
- 从 URL 获取 OpenAPI 规范
- 识别接口类型
- 提取字段信息
- 生成所有文件
4. 查看生成的文件
生成的文件会保存在：
- 如果当前有打开的文件：
当前文件所在目录/{模块名称}/
- 如果没有打开的文件：
工作区根目录/{模块名称}/
接口识别规则
工具会根据路径名称自动识别接口类型：
- 查询列表接口：路径包含 "query" 和 "list"
- 添加接口：路径包含 "add"
- 编辑接口：路径包含 "edit"
- 删除接口：路径包含 "delete"
示例
OpenAPI URL 示例
http://127.0.0.1:4523/export/openapi/4?version=3.1
生成的文件结构
{模块名称}/
├── index.vue # Vue 组件
├── api/
│ └── index.ts # API 接口
├── @types/
│ └── index.d.ts # 类型定义
└── config/
└── enum.ts # 枚举配置
系统要求
- VSCode 1.98.0 或更高版本
- Node.js 环境（用于运行扩展）
依赖项
生成的代码依赖以下库：
@libs/auto-gen-crud - CRUD 组件库@libs/request - HTTP 请求库
常见问题
Q: 为什么没有生成字段和类型？
A: 请检查：
- OpenAPI 规范格式是否正确
- 接口路径是否符合识别规则
- 响应结构是否包含
result 字段
Q: 如何自定义生成的代码？
A: 生成后的代码可以手动修改，但建议在生成前确保 OpenAPI 规范完整准确。
更新日志
查看 CHANGELOG.md 了解详细更新内容。
贡献
欢迎提交 Issue 和 Pull Request！
许可证
MIT License
相关链接
享受编码！ 🚀
| |
