umi-plugin-formily是基于UMI UI提供了一款可视化开发equery页面的插件，让您可以通过不编写代码直接配置属性，也可以通过预设的页面模板来方便快捷的生成对应的页面。

业务背景

在项目开发的过程中，我们总会碰到重复的业务场景，比如最常见增删改查的表格，如果您还处于不断的copy页面，更改字段的话，这样很容易在拷贝的过程中出现纰漏，或者造成项目无用的文件臃肿。不妨来尝试下我们提供的可视化插件，无需编写代码只需设置对应的组件类型属性即可，针对于重复的功能还可以建设模板库，模板一键生成页面，简单快捷高效！

快速集成

安装依赖

umi-plugin-formily插件我们已集成到@erajs的底层包中，所以您如果已经安装过依赖的话可以进入node_modules底层包查看，node_modules/@erajs下，如果没有建议您执行更新命令来更新依赖包。

检查nrm源链接

  1. nrm ls

设置nrm源为152源

  1. nrm use http://192.168.10.152:7001/

更新依赖

  1. yarn upgrade || npm update

引入配置

需要在项目config目录下的config.js文件中plugins下增加[‘@erajs/umi-ui-formily’],如：

  1.  plugins: [
  2.     ['@erajs/umi-ui-formily'],
  3.  ],

启动命令

在项目中执行zebra ui命令即可启动：

  1. zebra ui

备注：本地启动好会自动浏览器弹出，如未弹出手动输入http://localhost:3000/project/select尝试打开。

可视化使用

初始化导入项目

经过上述命令zebra ui 启动成功以后，您将会看到以下主界面，在右上角您可以点击导入项目来导入您的项目。如下图：

@erajs/umi-plugin-formily - 图1

点击打开项目

点击导入项目，导入成功后您就可以在此界面看到您的项目，点击项目进入。如下图：
image.png

EQ定制功能

当打开项目以后，如果您严格按照上述快速集安装依赖、引入配置的话，您可以在可视化工具左侧工具栏中看到一个EQ定制选择项，点击EQ定制打开。

基础区域

在右侧区域分为两个区域：

  • 资源管理器 - 加载插件可编辑的equery页面，让您可以更直观的查看页面层级等。
  • 设置页面属性区域- 包含查询表单区域跟表格区域还有js区域两个部分切换，您可在配置区域配置您需要的组件属性。

formily1.png

定制模板

除了基础区域配置页面，我们还可以支持模板配置界面，可以搭配配置您任何期望的界面。
formily4.png

通过上述的快速集成我相信您已成功的体验了我们**umi-plugin-formily插件**，如果您有其他方面的需求或者建议，期望您可以在下方评论区留言，让我们更加完善吧！