Giter VIP home page Giter VIP logo

rrfe's Introduction

@redrockfe/rrfe 🚀

logo

cli template apiTransform npm package

特点

  • 💡 由 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的数据mockroutes.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

rrfe's People

Contributors

sunsunmonkey avatar dependabot[bot] avatar yygod0120 avatar xi-duo avatar

Stargazers

zhw avatar withoutabc avatar  avatar  avatar CheerioInf avatar

Watchers

Hissy avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.