Qoder 能基于 OpenAPI 3.0+ 文档自动生成 Vue3 的 API 模块：包括带 TypeScript 类型、拦截器、取消请求的 request.ts，按标签分组的 service 文件，以及完整 schema 类型定义，并支持文档更新后精准增量同步。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你想把一份 Swagger 或 OpenAPI 格式的后端接口文档，直接转成 Vue3 项目中可调用的 API 请求模块和配套类型定义，避免手动写 axios 调用、反复核对字段名、漏定义响应结构——Qoder 能基于文档自动提取路径、方法、参数、状态码、schema，生成带 TypeScript 类型、错误拦截、请求取消能力的完整前端对接代码。
准备 API 文档源
确保你手头有一份可访问的 OpenAPI 3.0+ 文档，格式为 YAML 或 JSON。本地文件需是 【绝对路径】，URL 必须返回标准 OpenAPI Schema（不是 Swagger UI 页面 HTML）。若文档托管在内网或需鉴权，先用 curl 测试能否直接获取 raw 内容：curl -H "Authorization: Bearer xxx" https://api.example.com/openapi.json | head -20。
不支持 Postman Collection 导出的 JSON；也不支持 Swagger 2.0（即 swagger: "2.0" 开头），必须是 openapi: "3.0.0" 或更高版本。
在 Qoder 中触发 API 解析
打开 Qoder 桌面端或 QoderWork，在当前项目根目录下，点击右上角「Quest」按钮 → 新建任务 → 在对话框中输入：
立即学习“前端免费学习笔记（深入）”；
“请根据 OpenAPI 文档生成 Vue3 的 API 模块：文档路径为 /Users/you/project/docs/openapi.yaml，生成 src/api/ 目录，包含统一 request 实例、按标签分组的 service 文件、完整的 TypeScript 接口定义，所有请求默认启用 loading 状态管理与 401 自动跳登录。”
注意：路径必须写全，不能用 ./docs/openapi.yaml；如果用 URL，写 https://api.example.com/openapi.json 即可，无需额外说明格式。
生成并校验代码结构
等待 Planner Agent 完成文档解析，Coders 开始生成文件。右栏「Changed Files」将列出以下关键产出：
- src/api/request.ts：封装了 axios 实例，已注入拦截器、超时、baseURL、token 自动携带逻辑
- src/api/types/index.ts：导出全部 schema 定义，如 UserItem、PageResult<Order>，字段名与文档完全一致
- src/api/services/userService.ts：含 getUserList、createUser 等函数，每个函数返回 Promise<AxiosResponse<UserItem>>
- src/api/index.ts：统一导出所有 service，便于在组件中按需引入
检查 types/index.ts 中是否存在 any 类型——若出现，说明该接口响应体未定义 schema 或使用了 $ref 循环引用，需回退到原始文档修正后再重试。
在 Vue 组件中调用生成的 API
打开任意 .vue 文件，在 <script setup> 中导入并使用：
import { userService } from '@/api'
const { data, loading, execute } = userService.getUserList({ page: 1, size: 10 })
这一步操作起来很简单，直接解构就能拿到响应数据、加载态和执行函数，无需再手动处理 .then 或 try/catch。
注意：生成的 service 函数默认不自动执行，需显式调用 execute()；如需挂载即请求，可在 setup 中立即执行 execute()，或改用 useQuery 组合式函数（需项目已安装 @tanstack/vue-query）。
后续维护：文档更新后同步代码
当后端更新了 openapi.yaml 并提交到 Git，你在 Qoder 中右键该文件 → 选择「Update API Services from OpenAPI」→ 确认覆盖。
Qoder 会对比旧版 schema 差异，仅重写变更的 types 和 service 函数，保留你手动添加的注释、额外参数或业务逻辑包装（例如对某个字段做特殊 encode）。
【不要手动修改 src/api/types/index.ts 中自动生成的 interface 块】，否则下次同步会被完全覆盖。
