react-amis-admin在线文档 | 演示网站| 项目源码| Amis文档 | Amis可视化编辑器

本仓库主要目的在于提供一个开箱可用的Amis + React 低代码开发环境, 提供vite和webpack两种版本打包的方式。 支持Amis低代码, 同时支持React原生方式开发或者可选支持Antd等组件来定制复杂页面。 本工程不包含后端代码，前后端分离。

使用方法

npm i
npm start

即可访问页面,效果如下

如何新增一个Amis页面？

如果想阅读更多react-amis-admin开发说明，请参考在线文档

通过Amis只需要写JSON(或者根据拖拽生成的JSON)即可完成开发一个页面，极大减轻了后台页面前端工作量。

1、首先在pages下新增一个Hello.tsx页面

其中schema即amis的JSON代码，具体可以参考 官方文档

import schema2component from "@/utils/schema2component";

const schema = {
    "type": "page",
    "title": "hello",
    "body": {
        "label": "弹框",
        "type": "button",
        "actionType": "dialog",
        "dialog": {
            "title": "弹框",
            "body": "这是个简单的弹框。"
        }
    }
}

export default schema2component(schema);

2、增加路由配置

在path2Compoment文件导入Hello组件

import Hello from "@/pages/Hello";

然后在path2components对象增加路由

{
        path: '/hello',
        component: Hello
}

3、启动项目，测试即可

通过npm start,然后输入 http://localhost:8080/hello即可访问刚刚新建的页面

vite与webpack的介绍

提供vite和webpack两种版本打包的方式，对应vite和webpack分支。 vite由于采用esm机制，热更新会更快。webpack由于目前广泛使用，插件更丰富，使用方可以根据自己的场景做选择。

Amis文档

Amis官方文档： https://baidu.github.io/amis/zh-CN/docs/index

Amis官方可视化编辑器： https://aisuda.github.io/amis-editor-demo/#/hello-world

参考

本仓库灵感来自于以下几个仓库：

https://github.com/baidu/amis

https://github.com/aisuda/amis-admin

https://github.com/aisuda/amis-react-starter

https://github.com/PanJiaChen/vue-element-admin

https://baidu.gitee.io/amis/examples/index

其他

图标网站： https://fontawesome.com/v6/search?o=r&m=free

鸣谢

特别感谢 JetBrains 为开源项目提供免费的 IntelliJ WebStorm 等 IDE 的授权

Star History