低代码可视化拖拽页面编辑器让UI设计成倍提速，不香吗？

2023-12-20 13:33:03

如今，随着大前端的不断发展，越来越解放开发者的双手。尤其是针对一些简单的模板处理，可以通过拖拉拽的方式快速搭建UI界面，大大降低了开发难度，也提升了开发效率。

而低代码可视化拖拽页面编辑器正是这种解放开发者的工具。通过拖拽组件的方式快速搭建页面，不仅节省了开发时间，也让开发过程更加直观和高效。

以Vite2 + React17 + Typescript4 + Ant Design 4为例，搭建一个低代码可视化拖拽页面编辑器并不复杂，主要步骤如下：

安装项目依赖

yarn add vite react react-dom @vitejs/plugin-react-refresh typescript @ant-design/icons @ant-design/react @formily/core @formily/react

创建项目
```
vite create low-code-editor
```

配置项目

在项目根目录的vite.config.ts文件中，添加如下代码：

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react()],
});

创建组件

在项目根目录下创建components文件夹，并在其中创建Button.tsx组件文件，内容如下：

import React from "react";
import { Button } from "@ant-design/react";

const MyButton = () => {
  return <Button type="primary">Button</Button>;
};

export default MyButton;

创建编辑器

在项目根目录下创建editor.tsx文件，内容如下：

import React from "react";
import { FormProvider, useForm } from "@formily/react";
import { createSchemaField } from "@formily/core";
import MyButton from "./components/Button";

const schema = createSchemaField({
  type: "void",
  xComponent: "FormilyDesigner",
  xComponentProps: {
    grid: {
      span: 24,
    },
  },
  properties: {
    button: {
      type: "void",
      xComponent: MyButton,
      xComponentProps: {
        ghost: true,
      },
    },
  },
});

const Editor = () => {
  const { form } = useForm();

  return (
    <FormProvider form={form}>
      <schema.xComponent schema={schema} />
    </FormProvider>
  );
};

export default Editor;