EpicDesigner 快速上手指南:Vue3 拖拽式低代码设计器
项目快速了解
EpicDesigner 是一款基于 Vue3 开发的现代化低代码设计器,它让页面开发变得像搭积木一样简单。无论你是前端新手还是资深开发者,都能通过拖拽组件的方式快速生成功能完整的页面。
环境准备清单
在开始安装之前,请确保你的开发环境满足以下要求:
必备条件:
- Node.js 14.x 或更高版本
- npm 或 yarn 包管理器
- 现代浏览器(推荐 Chrome、Firefox)
可选准备:
- 熟悉 Vue3 基础概念
- 了解 JSON 数据结构
三步安装法
第一步:获取项目代码
git clone <project-repo-url>
第二步:安装依赖
进入项目目录并安装依赖:
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();

