很多前端同学,每日不仅要忙于内卷,还要忙于奔波在重复的业务逻辑期间,所以我们索性开发了这样一款工具,帮助大家可以直接根据接口生成 CURD 的全部代码,让大家生活多些快乐,功能 todolist:
- 根据接口生成 ts 的接口声明文档
- 根据接口直接生成 Vue+TS(js 代码)
- 根据接口直接生成 React+TS(js 代码)
- 定制选择指定 UI 组件库,直接根据接口生成
- 将 JavaScript 代码直接生成 TypeScript 代码
配置文件在项目根目录下,支持以下格式。如果没有配置文件所有值将会走默认配置。
.fecoderc
.fecoderc.json
.fecoderc.yaml
.fecoderc.yml
.fecoderc.js
.fecoderc.cjs
fe-code.config.js
fe-code.config.cjs
配置项 | 类型 | 描述 | 默认 |
---|---|---|---|
request |
object |
url : 使用该脚手架发送请求时的默认 baseUrl; headers :自定义 http 头 |
如下 json |
root |
string |
输出文件时的根路径 | src |
framework |
array |
使用的框架 Vue , React |
[] |
useTypescript |
boolean |
项目中是否使用 TS | true |
language |
string |
(预留)脚手架使用的自然语言 | zh-CN |
默认配置:
{
"request": {
"url": "http://localhost:3000",
"headers": {}
},
"root": "src",
"framework": [],
"useTypescript": true,
"language": "zh-CN"
}
#查看版本号
fe-code -V
#查看帮助文档
fe-code --help
#接口生成TS代码帮助文档
fe-code api2code --help
缩写:a2c
Options:
-i, --input <input> (可选)输入的json路径
-o, --output <output> (必填)输出interface的文件路径
-h, --help 查看帮助
-
通过请求接口的方式生成 interface
fe-code a2c -o src/index.ts -p /getDetails
-
通过本地 json 方式生成 interface
fe-code a2c -o src/index.ts -i /data.json
缩写: e2c
fe-code envir2code
# or 简写
fe-code e2c
缩写: r2c
Options:
-o, --output <output> (必填)输出 react crud 模板代码的文件路径
-h, --help 查看帮助
- 生成代码默认请求为 mock json(该目录需要映射到根目录 /mock,否则将影响展示), 请求这块的处理请结合实际情况自行修改;
- 生成代码字段属性是为了显示各种表单展示类型,这里为模拟字段,请根据实际情况自行配置;
fe-code react2code -o crud-demo
# or 简写
fe-code r2c -o crud-demo
缩写: v2c
Options:
-o, --output <output> (必填)输出 react crud 模板代码的文件路径
-h, --help 查看帮助
fe-code vue2code -o crud-demo
# or 简写
fe-code v2c -o crud-demo