表单设计器
Formily 表单设计器是基于designable而扩展出来的扩展包,它在继承了 designable 的基础能力上,提供了 Formily 基础表单的搭建和配置能力。
核心理念
Designable 的核心理念是将设计器搭建变成模块化组合,一切可替换,Designable 本身提供了一系列开箱即用的组件给用户使用,但是如果用户对组件不满意,是可以直接替换组件,从而实现最大化灵活定制,也就是 Designable 本身是不会提供任何插槽 Plugin 相关的 API。
本地安装
- 从 designable克隆代码
- 安装依赖
yarn install - 执行构建指令
npm run start:playground
支持的构建指令
"start:playground": "npm run start:basic",
"start:basic": "yarn workspace @designable/basic-example start",
"start:sandbox": "yarn workspace @designable/sandbox-example start",
"start:multi-workspace": "yarn workspace @designable/multi-workspace-example start",
"start:sandbox-multi-workspace": "yarn workspace @designable/sandbox-multi-workspace-example start",
执行 npm run start:basic 指令,会调用 examples/basic 目录下代码。
不幸的访问地址页面报错,错误信息如下:
错误原因 main/examples/basic/config/template.ejs 引入的 antd 是 5.x 版本,package.json 里依赖是 4.x,版本不匹配引起的。
将 <script src="https://unpkg.com/antd/dist/antd-with-locales.min.js"></script> 替换成 <script src="https://unpkg.com/antd@4.24.3/dist/antd-with-locales.min.js"></script> 即可。
运行成功的样子是这样的。
不同的指令去 examples 目录下找对于的目录进行修改即可。