前端代码生成

GoWind Toolkit 前端代码生成器基于 OpenAPI 元数据，全自动生成完整的中后台管理页面代码，支持 Vue3 (Element Plus / Vben Admin) 和 React (Ant Design Pro) 三套主流模板。

核心运行原理

与常规前端代码生成器不同，GoWind Toolkit 不支持手动精细化配置字段与页面功能，一切页面结构全部由 OpenAPI 元数据自动推导：

核心理念：后端定义一切，前端直接消费。

• 后端基于 Protobuf 定义接口、字段类型、入参出参
• 工具自动将 Protobuf 编译为标准 OpenAPI 描述文件
• 前端直接读取 OpenAPI 内置元数据，自动分配表格列、搜索项、表单字段

核心优势：全程无需前端手动配置，规避人为配置出错，前后端结构 100% 一致。

三套官方内置模板

生成内容对比

每套模板都会生成以下完整代码：

前置准备

1. 安装最新版 GoWind Toolkit 桌面客户端
2. 拥有完整 Go 后端项目，并通过 Protobuf 成功导出 openapi.yaml
3. 本地安装 Node.js，用于启动和调试生成后的前端工程

实操流程

进入前端代码生成模块

打开客户端，左侧侧边栏点击 【前端代码生成】，进入操作面板。

载入 OpenAPI 数据源

1. 在页面顶部 OpenAPI 数据源区域，点击导入按钮
2. 选中后端编译完成的 openapi.yaml 文件
3. 导入成功后，工具自动解析全部接口、结构体、字段属性

选择前端模板

在模板下拉菜单内，根据团队技术栈直接选择：Vue3 Element Plus / Vue3 Vben Admin / React Ant Design。

填写项目信息

仅需填写输出目录，指定前端工程保存文件夹。路径禁止中文、空格、特殊符号。

预览生成代码

工具支持预览将要生成的所有代码文件：

React + Ant Design 页面：

Vue3 + Element Plus 页面：

Vue3 + Vben Admin 页面：

API 调用层：

Query Hooks：

i18n 国际化：

一键生成代码

确认模板、输出目录无误后，直接点击 【生成代码】。等待约 2 秒，自动生成完整前端工程。

生成内容包含：

• 路由配置和侧边栏菜单
• API 请求调用层
• 全套 CRUD 页面（列表、搜索、新增、编辑、删除、导出）
• i18n 国际化文件

启动前端项目

进入生成的前端项目根目录，执行：

# 安装依赖
pnpm install

然后根据选择的模板启动：

# React 版本
cd frontend/admin/react
pnpm dev

# Vue3 Element Plus 版本
cd frontend/admin/vue-element
pnpm dev

# Vue3 Vben Admin 版本
cd frontend/admin/vue-vben
pnpm dev:antd

项目启动成功后，所有页面、菜单、搜索条件、弹窗表单、新增/删除/导出功能全部开箱即用，接口自动对接后端 BFF 服务。

常见问题

相关文档：

• GoWind Toolkit 介绍
• 后端代码生成