npm i epic-designer

npm i element-plus

// 引入Element plus样式
import "element-plus/dist/index.css";
// 引入k-designer样式
import "epic-designer/dist/style.css";
import { pluginManager, setupElementPlus } from "epic-designer";
// 注册Element UI
setupElementPlus(pluginManager);

npm i ant-design-vue

// 引入antd UI样式
import "ant-design-vue/dist/antd.css";
// 引入k-designer样式
import "epic-designer/dist/style.css";
import { pluginManager, setupAntd } from "epic-designer";
import {  } from "epic-designer";
// 使用Antd UI
setupAntd(pluginManager);

// 引入k-designer样式
import "epic-designer/dist/style.css";
import { pluginManager, setupNaiveUi } from "epic-designer";
// 注册Naive Ui
setupNaiveUi(pluginManager);

<template>
  <div class="h-full">
    <EDesigner />
  </div>
</template>
<script setup lang="ts">
import { EDesigner } from "epic-designer";
</script>
<style>
.h-full {
  height: 100vh;
}
</style>

<template>
  <div>
    <EBuilder :pageSchema="pageSchema" />
  </div>
</template>
<script setup>
import { EBuilder } from "epic-designer";

const pageSchema = {
  schemas: [
    {
      type: "page",
      id: "root",
      children: [
        {
          label: "输入框",
          type: "input",
          field: "input",
          icon: "icon-write",
          input: true,
          componentProps: {
            defaultValue: "",
            placeholder: "请输入",
            size: "default",
            type: "text",
          },
          id: "gbm1xhrrj5s00",
        },
      ],
      componentProps: {
        style: {
          padding: "16px",
        },
      },
    },
  ],
};
</script>