特点

• 💡 由 vite 构建的多种模板
• ⚡️ 快速启动
• 📦 开箱即用，集成多种工具链 eslint,prettier,husky
• 🛠️ 使用 tinypng 进行批量图片压缩
• 🚀 根据特定格式的 md 自动生成 TS 接口类型和网络请求代码以及 Mock 数据

使用指南

安装

脚手架下载，任意一个包管理器都可以，个人比较喜欢 pnpm

pnpm i @redrockfe/rrfe -g

创建新项目

rrfe create [project]

压缩图片

rrfe tinypng [root]

会按照 ./assets/imgs 或 ./assets/img 或 ./assets/imges 或 ./assets/imge 寻找文件位置

根据模板生成 TS 类型以及调用函数

rrfe api

可以自己选择解析格式

rrfe api --type=apifox

不使用mock

rrfe api --mock=false

使用说明

需要把api.md或者api.mdx放在根目录下

自动解析生成 ts 和 api 请求,

同时也会自动生成基于json-server的数据mock的routes.json,db.json

关键参数一定要写对

• 切分文件: ## Page:xxx
• 读取 URL: ### URL：
• 请求方式: ### 请求参数：
• 请求参数: ### 返回参数：

注意请求方式以及返回参数使用 JSON 格式

推荐用法使用 mdx 的 snippet 直接复制如下代码即可在用户代码片段的 mdx 里即可

"rrfeApi": {
  "prefix": "rrfemd",
  "body": [
    "",
    "## ${1}",
    "",
    "",
    "## 简要描述：",
    "",
    "",
    "",
    "### URL",
    "",
    "${2}",
    "",
    "### 请求方式：",
    "",
    "${3}",
    "",
    "### 请求参数：",
    "",
    "``` json",
    "{",
    "${4}",
    "}",
    "```",
    "### 请求参数说明：",
    "",
    "",
    "### 返回参数：",
    "",
    "``` json",
    "{",
    "${5}",
    "}",
    "```",
    "",
    "### 返回参数说明"
  ],
  "description": "rrfe api md"
}

然后鼠标输入 rrfeApi 就会自动生成按 tab 即可快速输入

目前处于 mvp 版后续会进行继续迭代，提供更加丰富的选项

常见问题

JSON 格式错误

❌

{
  "a": "test",
}

✔️

{
  "a": "test"
}

TODO

• 提供更加丰富的配置
• 可能引入插件系统
• 完善边界情况
• 优化生成产物
• 完善单测
• 完善 logger