DIY一个自己的C端低代码平台（1）-基础功能实现

前期回顾

组件库设计

juejin.cn/post/708911…

仓库地址

github.com/just-00/my-…

引入

这个系列，我们会带大家实现一个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受控表单分为了三步

1. 使用createSchemaField挑选表单会使用到的UI组件，比较灵活的选择与antd还是fusion做结合
2. 定义schema，传入SchemaField生成表单
3. 是用createForm创建出表单对象，与Form绑定

import React, { useMemo, useState } from "react";
import { createForm } from "@formily/core";
import { createSchemaField } from "@formily/react";
import { Form, Form