Designable低代码平台快速搭建

797 阅读1分钟

Designable是什么?

是可以快速代建一个前端低代码平台的库。

Designable的优点和缺点

先说缺点。Designable库上次更新已经是两年前了。对于现在要使用的话,需要做一些兼容处理。但是它强大的功能(在线编码,预览,国际化配置...)及丰富的开箱即用的组件,让我依然选择它。

用Designable快速写一个low code平台

Designable本身是不依赖组件库的,但是她对常用组件库做了扩展,且扩展内容非常丰富。达到了开箱删除不需要部分就可上线的程度。

Designable组件扩展有两种 @designable/formily-antd,@designable/formily-next。下面案例用antd版本。

安装依赖

npm i --save @designable/formily-antd @formily/core @formily/react @formily/shared @formily/antd

复制案例

  1. 进入Designable gitlab,复制 designable/formily/antd/playground/main.tsx的代码到你自己的本地组件的文件,记得去掉案例里面的ReactDOM.render(..., App),改成export defualt Appimage.png

  2. 然后根据编辑器提示依赖错误,将所需依赖的文件从源码中复制到你自己的项目中。如图 image.png

这个过程中你可能会遇到各种各样的问题,介于大家的项目都不一样。这里就暂开细说。UP自己遇到的问题都解决了。所以不要怀疑Designable有问题。

启动

一切顺利你会看到这样一个页面或者组件 image.png

自定义组件

待补充...