前期回顾
组件库设计
仓库地址
引入
这个系列,我们会带大家实现一个C端的低代码平台
整体的布局参照上图,操作的流程是从gallery-list中选择需要的组件,拖至layout,并在layout中做顺序调整,选中组件在form config中进行属性配置,整个过程中在renderer中展示效果,最后发布成为网站
这是目前的仓库设计(后面可能也会改),蓝色标为一期必做需求,黑色为二期优化需求
这一期实现的是红线框出的内容,basic-components引入基础组件和对应的schema并统一导出,platform-consumer接入basic-components和renderer,实现选取组件→配置组件→渲染组件这个通路
关于components也就是组件库的设计实现主要写在了上一篇,有兴趣的同学可以看一下最上方的前期回顾
platform-consumer技术选型
上一章说到了platform-consumer使用vite + react来搭建,在css预处理器上我们选用了less,css框架选择了tailwindcss
tailwindcss在vite上安装非常简单,按照官方给的顺序来就可以了tailwindcss.com/docs/guides…,安装完之后在css文件中会辨别不出@tailwind的指令,如果你使用的是vscode,需要同时安装一个postcss support插件
而UI框架因为我们要根据schema生成表格,所以选用了最有名的formily + antd的组合
这里可以看一下formily的设计,formily将生成一个schema受控表单分为了三步
- 使用createSchemaField挑选表单会使用到的UI组件,比较灵活的选择与antd还是fusion做结合
- 定义schema,传入SchemaField生成表单
- 是用createForm创建出表单对象,与Form绑定
import React, { useMemo, useState } from "react";
import { createForm } from "@formily/core";
import { createSchemaField } from "@formily/react";
import { Form, Form