Epic Designer: 开箱即用的拖拽式低代码设计器

最新推荐文章于 2024-09-13 22:09:30 发布

邢郁勇Alda

最新推荐文章于 2024-09-13 22:09:30 发布

阅读量568

点赞数 25

本文链接：https://blog.csdn.net/gitblog_00021/article/details/141011097

版权

Epic Designer: 开箱即用的拖拽式低代码设计器

epic-designer项目地址:https://gitcode.com/gh_mirrors/ep/epic-designer

项目介绍

Epic Designer是一款基于Vue3构建的功能强大、易上手的拖拽式低代码设计器。它不仅具备基本的页面设计功能，还提供高度的可扩展性，允许开发者根据需求自由添加和定制组件。

主要特性

组件库兼容: Epic Designer支持多种UI组件库，包括Element Plus、Ant Design Vue 和 Naive UI。
JSON配置: 利用JSON配置文件生成页面，提高开发效率。
扩展能力: 强大的组件扩展、事件扩展及布局调整等功能。
动态预览: 实时预览设计结果，即时反馈变化。

快速启动

安装Epic Designer

通过npm安装Epic Designer:

npm i epic-designer

或者使用yarn进行安装:

yarn add epic-designer

集成UI组件库

假设我们选择使用Naive UI作为UI组件库，首先安装Naive UI:

npm i naive-ui

接着，在项目的主要文件（如main.ts或main.js）中引入并注册Naive UI组件：

// 引入epic-designer样式
import 'epic-designer/dist/style.css';
import { pluginManager, setupNaiveUi } from 'epic-designer';

// 注册Naive Ui
setupNaiveUi(pluginManager);

使用EDesigner（设计器）

在.vue文件中使用EDesigner组件进行界面设计：

<template>
    <div class="h-full">
        <EDesigner />
    </div>
</template>

<script setup lang="ts">
import { EDesigner } from 'epic-designer';
</script>

<style>
.h-full {
    height: 100vh;
}
</style>

应用实例: EBuilder (生成器)

展示如何使用EBuilder从JSON配置文件构建页面：

<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"
                }
            ]
        }
    ]
};
</script>