amis：百度低代码前端页面框架安装与使用指南

一、项目官方信息

amis 是百度开源的前端低代码页面框架，通过 JSON 配置即可生成完整页面，无需写大量 React 代码。适合快速搭建后台管理、数据展示类页面。

二、官方图片

上图为 amis 官方 Logo。

三、环境要求

• 现代浏览器；
• Node.js 16+（集成开发）；
• 可通过 CDN 直接引入。

四、使用步骤

1. CDN 引入

<script src="https://cdn.jsdelivr.net/npm/amis@6/dist/amis.js"></script>

2. 用 JSON 渲染页面

let json = {
  type: 'page',
  title: '简单页面',
  body: {
    type: 'tpl',
    tpl: 'Hello amis'
  }
};
amis.render(json, document.getElementById('root'));

3. npm 集成

npm install amis

import { render } from 'amis';

4. 可视化编排

用 amis-editor 拖拽生成 JSON。

五、使用方法

• JSON 驱动：表单、CRUD、详情页；
• 富组件：表格、表单、弹窗、图表；
• 接口联调：配置 API 即可；
• 主题定制；
• amis-admin：现成管理模板。

六、常见问题 FAQ

1. amis 是什么？ JSON 配置式低代码前端框架。

2. 需要写 React 吗？ 用 JSON 即可，可嵌入现有 React 项目。

3. 有可视化编辑器吗？ 有 amis-editor。

4. 适合什么场景？ 中后台、CRUD、数据展示。

5. 怎么联调接口？ 在 JSON 中配置 api。

6. 协议是什么？ MIT。

七、跳转链接

• GitHub 仓库：baidu/amis
• 国内文档：aisuda.bce.baidu.com/amis
• 在线编辑器：amis-editor-demo