官方教程已经上线, 请访问: niuhe.zuxing.net/
本文以开源项目 vue3-element-admin 项目为例, 说明用 niuhe 插件生成 typescript 结构定义和 api 请求文档的全过程。
项目结构
- admin-core-niuhe 后端项目 admin-core 的辅助项目
- admin-core vue3-element-admin 的后端项目
- vue3-element-admin 前端项目, 集成了用户名, 菜单, 角色和权限管理等基本功能
体验时需要将 admin-core clone 至 admin-core-niuhe 项目的 src 目录下
当前项目 niuhe 文件夹下文件如下, 其中 all.niuhe 引入了所有的 api_xx.niuhe 文件, .config 为 gitignore 掉的配置文件
niuhe
├── .config
├── all.niuhe
├── api_auth.niuhe
├── api_depts.niuhe
├── api_dict.niuhe
├── api_dict_type.niuhe
├── api_files.niuhe
├── api_menus.niuhe
├── api_roles.niuhe
├── api_users.niuhe
├── api_vendor.niuhe
└── comm.niuhe
生成 ts 结构和 api 定义
niuhe 插件默认只生成 golang 代码, 如要生成 ts 时需要在 #langs= 中添加 #langs=ts。
.config 文件内容如下
#langs=ts
#tstypes=/Users/android/Server/vue3-element-admin/src/typings/admin-core.d.ts
#tsapi=/Users/android/Server/vue3-element-admin/src/api/admin/api.ts
- 第一声明了需要生成 ts 文档,
- 第二行指定 typing 文件路径,默认路径为
typings/types.d.ts; 自定义后生成内容为 admin-core.d.ts, 点击查看 - 第三行指定了 api 文件路径, 默认路径为
typings/api.ts;自定义后生成内容为 api.ts, 点击查看
在不修改 types 和 api 时生成代码位于 typings 目录下, 其文件结构为
typings
├── api.ts
├── event.d.ts
├── request.ts
└── types.d.ts
以上简单设置即实现了 niuhe idl 定义生成 typescript 结构和 api 请求和返回数据结构定义。示例代码生成的内容过长, 这里就不贴代码了, 具体请点击本文链接查阅