amis：百度开源低代码神器！JSON秒建后台，开发效率飙升300%

❤️ 如果你也关注 AI 的发展现状，且对 AI 应用开发感兴趣，我会每日分享大模型与 AI 领域的开源项目和应用，提供运行实例和实用教程，帮助你快速上手AI技术！

🥦 AI 在线答疑 -> 智能检索历史文章和开源项目 -> 丰富的 AI 工具库 -> 每日更新 -> 尽在微信公众号 -> 搜一搜：蚝油菜花 🥦

💻 「程序员集体罢工？这个百度神器把前端代码卷没了」

大家好，我是蚝油菜花。你是否也经历过这些开发酷刑：

👉 产品经理第18次改需求，React组件树炸成烟花
👉 新来的菜鸟把表单验证写成俄罗斯套娃
👉 老板凌晨3点要看数据大屏，你还在调echarts参数...

今天要祭出的 百度amis ，堪称后台开发的"核能加速器"！这个开源低代码框架凭三大绝活正在血洗前端圈：

✅ JSON即页面：1段配置生成完整管理系统
✅ 拖拽式炼丹：零基础搭出阿里云级控制台
✅ 企业级开箱：权限/国际化/主题换肤一键搞定

最疯狂的是某电商团队实测------用amis把订单系统开发从2周压到8小时！文末免费放送《amis配置宝典》，让你的团队从此告别996！

🚀 快速阅读

amis 是百度开源的低代码前端框架，基于 JSON 配置快速生成后台页面。

核心功能：支持表单、表格、图表、CRUD 操作等功能，提供丰富的开箱即用组件。
技术原理：基于 JSON 配置定义页面结构和交互逻辑，动态生成 HTML 结构和绑定事件。

amis 是什么

amis 是百度开源的低代码前端框架，基于简单的 JSON 配置快速生成各种后台页面，无需编写复杂前端代码。它支持表单、表格、图表、CRUD 操作等功能，提供丰富的开箱即用组件，具备高扩展性和灵活性，支持轻松集成到 React 或纯 HTML 项目中。

amis 配备可视化编辑器，支持主题自定义、国际化、权限管理等企业级特性，帮助开发者高效搭建复杂后台系统，提升开发效率，降低开发成本。

amis 的主要功能

基于 JSON 配置的页面生成：基于 JSON 字符串直接生成页面元素（如表单、表格、图表、CRUD 列表等），无需编写前端代码。提供可视化拖拽编辑器，零基础用户能快速上手。
强大的低代码支持：支持复杂表单验证、国际化、权限管理等企业级特性。提供自定义字段的表单控件、自适应图表渲染等功能，满足复杂后台页面需求。
高扩展性与灵活性：提供丰富的开箱即用组件，支持主题和样式自定义。兼容性好，轻松集成到 React 或纯 HTML 项目中，支持二次开发。
企业级功能支持：支持文件上传、PDF 预览等实用功能。提供完整的 CRUD（增删改查）操作支持，轻松搭建后台系统。
高效的开发体验：简化组件化开发，支持实时预览效果。提供详细的开发指南和测试流程，方便开发者快速上手和维护。

amis 的技术原理

JSON 驱动的页面渲染：基于 JSON 配置定义页面结构和交互逻辑。JSON 数据描述了页面的布局、组件类型、数据绑定和事件处理等信息。框架解析 JSON 配置后，动态生成对应的 HTML 结构和绑定事件，实现页面的渲染和交互。
组件化开发：amis 基于组件化设计理念，内置丰富的组件库（如表单控件、表格、图表等）。开发者基于组合组件，快速搭建复杂的页面。组件之间用 JSON 配置进行数据交互和行为控制。
TypeScript 与 SCSS：框架核心用 TypeScript 编写，确保代码的可维护性和扩展性。基于SCSS 进行样式开发，支持主题和样式自定义，满足不同项目的设计需求。
兼容多种前端框架：基于封装和适配，无缝集成到 React、Vue 或纯 HTML 项目中。提供统一的接口和配置规范，开发者轻松将 amis 页面嵌入到现有项目中。
可视化编辑器：提供拖拽式 UI 编辑器，用户用可视化操作生成 JSON 配置。编辑器支持实时预览，所见即所得，进一步降低低代码开发的门槛。

如何运行 amis

1. 安装依赖

推荐使用 node 12/14/16。npm 7+，因为用到了 workspaces 功能。

bash 复制代码

# 安装项目 npm 依赖，在 node 12 下会有报错但不影响正常使用。
npm i --legacy-peer-deps

# 启动项目，等编译结束后通过 http://127.0.0.1:8888/examples/pages/simple 访问。
npm start

如果是开发编辑器，需要访问 http://127.0.0.1:8888/packages/amis-editor/

2. 测试

注意：本地修改代码后，执行测试用例（npm test --workspaces）之前需要先执行npm run build完成编译，因为 jest 并不支持 TypeScript

bash 复制代码

# 安装依赖
npm i --legacy-peer-deps

# 执行构建
npm run build

# 执行测试用例
npm test --workspaces

# 测试某个用例
# <spec-name>为用例名称，比如inputImage
npm test --workspace amis -- -t <spec-name>

# 运行某个单测文件
./node_modules/.bin/jest packages/amis/__tests__/renderers/Form/buttonToolBar.test.tsx

# 运行某个单测文件里的某个例子
./node_modules/.bin/jest packages/amis/__tests__/renderers/Form/buttonToolBar.test.tsx -t 'Renderer:button-toolbar'

# 查看测试用例覆盖率
npm run coverage

# 更新 snapshot
npm run update-snapshot

# 更新单个 snapshot
# <spec-name>为用例名称，比如inputImage
npm run update-snapshot --workspace amis -- -t  <spec-name>

3. 发布版本

bash 复制代码

# 发布内部 registry
npm run publish

# 发布外网环境
# 先通过一下命令设置版本号
npm run version
npm run release

资源

项目主页 ：baidu.github.io/amis
GitHub 仓库 ：github.com/baidu/amis

🥦 AI 在线答疑 -> 智能检索历史文章和开源项目 -> 丰富的 AI 工具库 -> 每日更新 -> 尽在微信公众号 -> 搜一搜：蚝油菜花 🥦