EpicDesigner Vue3 拖拽式低代码设计器快速上手
项目快速了解
EpicDesigner 是一款基于 Vue3 开发的现代化低代码设计器，它让页面开发变得像搭积木一样简单。无论你是前端新手还是资深开发者，都能通过拖拽组件的方式快速生成功能完整的页面。
环境准备清单
在开始安装之前，请确保你的开发环境满足以下要求：
必备条件：
- Node.js 14.x 或更高版本
- npm 或 yarn 包管理器
- 现代浏览器（推荐 Chrome、Firefox）
可选准备：
- 熟悉 Vue3 基础概念
- 了解 JSON 数据结构
三步安装法
第一步：获取项目代码
git clone https://gitcode.com/gh_mirrors/ep/epic-designer
第二步：安装依赖
进入项目目录并安装依赖：
cd epic-designer && npm install
第三步：配置 UI 组件库
EpicDesigner 支持多种流行的 UI 组件库，你可以根据项目需求选择其中一种：
Element Plus 配置
// 引入 EpicDesigner 样式
import "epic-designer/dist/style.css";
// 引入 Element Plus 样式
import "element-plus/dist/index.css";
import { setupElementPlus } from "epic-designer/dist/ui/elementPlus";
// 注册 Element Plus
setupElementPlus();
Ant Design Vue 配置
// 引入 EpicDesigner 样式
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();
UI 库选择指南
Element Plus
- 特点：企业级 UI 设计语言，组件丰富
- 适用场景：后台管理系统、企业应用
- 优势：文档完善，社区活跃
Ant Design Vue
- 特点：设计规范严谨，视觉风格统一
- 适用场景：中后台产品、数据展示类应用
- 优势：设计理念先进，国际化支持好
Naive UI
- 特点：组件完整，主题可定制性强
- 适用场景：需要高度定制化的项目
界面布局解析
EpicDesigner 采用经典的三栏式布局设计：
- 左侧活动栏：包含完整的组件库，从基础表单到复杂布局组件一应俱全。
- 中央编辑区域：这是你的主要工作区，可以在这里拖拽组件、调整布局、预览效果。
- 右侧属性面板：选中任意组件后，可以在这里配置组件的各项属性。
深色主题体验
EpicDesigner 提供完整的深色主题支持，让你的设计工作更加舒适。
常见问题解答
Q：安装过程中遇到依赖冲突怎么办？
A：建议删除 node_modules 文件夹和 package-lock.json 文件，然后重新执行 npm install。
Q：如何切换不同的 UI 组件库？
A：只需在配置文件中更换对应的 setup 函数即可，EpicDesigner 会自动适配。
Q：项目启动后页面空白？
A：检查是否已正确引入 EpicDesigner 的样式文件。
进阶使用技巧
自定义组件扩展
EpicDesigner 支持自定义组件扩展，你可以将自己开发的组件集成到设计器中。
JSON 配置导出
所有设计的页面都可以导出为 JSON 配置，方便在其他项目中复用。
多设备预览
支持 PC 端和移动端的实时预览，确保页面在不同设备上都有良好的显示效果。
开始你的设计之旅
完成以上配置后，运行以下命令启动项目：
npm run dev
现在你就可以开始使用 EpicDesigner 来快速创建精美的页面了。