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
复制案例
-
进入Designable gitlab,复制
designable/formily/antd/playground/main.tsx的代码到你自己的本地组件的文件,记得去掉案例里面的ReactDOM.render(..., App),改成export defualt App。 -
然后根据编辑器提示依赖错误,将所需依赖的文件从源码中复制到你自己的项目中。如图
这个过程中你可能会遇到各种各样的问题,介于大家的项目都不一样。这里就暂开细说。UP自己遇到的问题都解决了。所以不要怀疑Designable有问题。
启动
一切顺利你会看到这样一个页面或者组件
自定义组件
待补充...