17.7k star！百度开源的前端低代码框架

发表于： 2025年1月15日 2025年1月15日
分类：未分类

今天给大家分享一个由百度开源的低代码前端框架Amis，它可以通过简单的JSON配置来快速构建丰富的用户界面。

就像官网[1]上介绍的那样，现在的前端开发变得越来越复杂，门槛也越来越高，市面上各种UI组件库在不停的教育你要熟悉npm、精通webpack、熟练掌握vue等等，但是很多时候我就想做一个简单的数据表格，这么复杂的技术栈是完全学不过来。

因此，Amis的设计理念是让前端开发变得更加简单、高效，即使是非科班出身的程序员也能够通过配置轻松创建表单、表格、卡片等各种UI组件。

安装

amis有两种使用方法：

JS SDK，可以用在任意页面中
React，可以用在React项目中

SDK版本适合对前端或React不了解的开发者，它不依赖npm及webpack，可以像Vue/jQuery那样外链代码就能使用。

SDK的方式直接在页面中引用js文件和css文件：

<link rel="stylesheet" href="sdk.css" />
<link rel="stylesheet" href="helper.css" />
<link rel="stylesheet" href="iconfont.css" />
<script src="sdk.js"></script>

React的方式直接通过npm安装：

npm install amis --save

典型组件

带增删改查的数据表格

对于一些信息管理系统，下面这种数据列表应用应该非常广泛，就简单的增删改查，然后支持分页等等。这种场景就是amis的强项了，简单几行JSON配置就可以完成。

图表

对于一些常用的图表，就没必要再引入其他图表库了，amis可以通过简单的配置轻松拿捏，当然内核用的echarts，理论上echarts的所有图表类型都支持。

表单项

amis有着比较完整的表单组件，基本上常用的和不常用的都有。这些表单项也是通过配置即可实现。

可视化编辑器

目前amis可视化编辑器也作为单独的npm包发布了出来，可以通过 npm 安装使用，并且可以进行在线体验[2]。

Vue组件集成

amis底层是基于React技术开发，而Nop平台的前端主要基于Vue3.0技术开发，为了便于集成第三方的vue组件, Nop平台提供了一个通用的包装组件。在AMIS的配置文件中我们可以这样使用：

{
  "type": "vue-form-item",
  "vueComponent": "Vue组件名",
  "props": {
    // 传给vue组件的属性
  }
}

移动端支持

amis的设计本身是响应式的，也就意味着大部分的组件都可以在移动端进行较好地展示，不需要我们做特殊的代码改造。

尤其从1.6.0版本开始，amis会默认在移动端下使用仿原生UI的展现，比如日期选择会从底部弹出，这样就能更好的贴切移动端的交互方式。

同时我们也针对移动端进行特殊定制，可以通过mobile属性来在移动端下覆盖部分属性。

开源地址：

https://github.com/baidu/amis

参考资料

官网: https://baidu.github.io/amis

在线体验: https://aisuda.github.io/amis-e

admin

2126