Giter VIP home page Giter VIP logo

rrfe's Introduction

@redrockfe/rrfe 🚀

logo

cli template apiTransform npm package

feature

  • 💡 由 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和api

rrfe api 

可以自己选择解析格式 example:

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代码块
  • 请求参数 "### 返回参数:" 然后写相应的json代码块

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

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

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

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

常见问题

json 注意 不会报错

``` json

{

"a":"test",

}

```

但其实json格式错了,要去掉逗号

``` json

{

"a":"test"

}

```

TODO

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

rrfe's People

Contributors

sunsunmonkey avatar dependabot[bot] avatar yygod0120 avatar

Stargazers

zhw 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.