【免费下载】 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>

---

应用案例和最佳实践

示例一: 表单创建

• 步骤1: 在设计器中拖放表单项至页面；
• 步骤2: 调整各字段的属性，如占位符、验证规则；
• 步骤3: 导出JSON配置；
• 步骤4: 使用EBuilder构建并呈现表单界面。

示例二: 响应式设计

• 利用Epic Designer提供的响应式组件调整布局，确保跨设备的一致体验。

最佳实践

• 重用组件: 创建一套标准组件库，减少重复编码。
• 优化JSON管理: 整理组件配置为模块化结构，便于管理和复用。
• 测试用户体验: 在多个设备和浏览器中测试，确保一致性和可用性。

---

典型生态项目

生态项目概述

K-Form-Design

一款专注于表单设计的插件，集成于Epic Designer生态系统内，提升了表单设计的灵活性和效率。

K-Chart-Vue

面向图表分析的扩展工具，丰富了数据分析场景中的可视化效果，配合Epic Designer实现数据驱动的设计方案。

这些项目与Epic Designer紧密相连，共同构成了一个全面的开发平台，覆盖从数据输入到视觉呈现的完整流程。

---

希望这份指南能够帮助您迅速掌握Epic Designer的核心功能，并探索其无限的可能性！

如果您对特定主题感兴趣，或者遇到具体的问题，请随时询问，我在这里为您服务！