代码拉取完成，页面将自动刷新
📦github仓库：https://github.com/Kchengz/epic-designer
📦gitee仓库：https://gitee.com/kcz66/epic-designer
📖文档地址：https://kcz66.gitee.io/epic-designer/
💎项目预览地址：
可以简称epic设计器，是一个功能强大、开箱即用的拖拽式低代码设计器。它基于 Vue3 开发，兼容多套 UI 组件库，除了基础的页面设计功能，EpicDesigner 还提供了强大的扩展功能，可以让开发者根据自己的需求自由扩展和定制组件。此外，EpicDesigner使用 JSON 配置来生成页面，可帮助开发者快速生成页面，提高开发效率。它提供了两个重要组件：e-designer 设计器和 e-builder 生成器。
EDesigner 是一个可视化设计器组件，用户可以通过拖拽组件的方式快速生成 JSON 配置。它提供了丰富的组件库和配置项，用户可以根据需要选择合适的组件并配置相应的属性、事件和动作。设计器还提供了实时预览功能，用户可以随时查看所设计页面的效果。最终，用户可以将 JSON 配置导出，用于页面的生成和修改。
EBuilder 是一个页面构建组件，它可以将设计器生成的 JSON 配置构建成页面，完成组件的渲染、事件绑定和数据回显等操作。
npm i epic-designer
epic-designer 目标是支持多 UI 兼容,目前支持以下 UI
安装ui框架依赖
npm i element-plus
main.ts 或者 main.js 引入注册组件
// 引入epic-designer样式
import "epic-designer/dist/style.css";
// 引入Element plus样式
import "element-plus/dist/index.css";
import { setupElementPlus } from "epic-designer/dist/ui/elementPlus";
// 注册Element UI
setupElementPlus();
安装ui框架依赖
npm i ant-design-vue
main.ts 或者 main.js 引入注册组件
// 引入epic-designer样式
import "epic-designer/dist/style.css";
// 引入antd UI 重置样式
import "ant-design-vue/dist/reset.css";
import { setupAntd } from "epic-designer/dist/ui/antd";
// 使用Antd UI
setupAntd();
为了减少维护精力，后续开发测试主要以 v4.x版本，不再对v3.x版本进行测试，建议升级ant-design-vue到v4.x最新版本
// 引入epic-designer样式
import "epic-designer/dist/style.css";
// 引入antd UI样式
import "ant-design-vue/dist/antd.css";
import { setupAntd } from "epic-designer/dist/ui/antd";
// 使用Antd UI
setupAntd();
安装ui框架依赖
npm i -D naive-ui
main.ts 或者 main.js 引入注册组件
// 引入epic-designer样式
import "epic-designer/dist/style.css";
import { setupNaiveUi } from "epic-designer/dist/ui/naiveUi";
// 注册Naive Ui
setupNaiveUi();
<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: "epic-icon-write",
input: true,
componentProps: {
defaultValue: "",
placeholder: "请输入",
size: "default",
type: "text",
},
id: "gbm1xhrrj5s00",
},
],
componentProps: {
style: {
padding: "16px",
},
},
},
],
};
</script>
点击链接加入 qq 群聊
如果你觉得epic-designer对你有帮助，欢迎给我捐赠
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型