【亲测免费】 EpicDesigner 安装和配置指南

2026-01-20 02:39:31作者：贡沫苏Truman

1. 项目基础介绍

EpicDesigner 是一个基于 Vue3 开发的拖拽式低代码设计器，旨在帮助开发者快速生成页面并提高开发效率。它兼容多套 UI 组件库，提供了丰富的扩展功能，允许开发者根据需求自由扩展和定制组件。

主要编程语言

JavaScript
TypeScript

2. 项目使用的关键技术和框架

Vue3: 项目基于 Vue3 开发，利用 Vue 的响应式系统和组件化开发模式。
UI 组件库: 支持 Element Plus、Ant Design Vue、Naive UI 等多套 UI 组件库。
JSON 配置: 使用 JSON 配置来生成页面，简化了页面的设计和生成过程。

3. 项目安装和配置的准备工作和详细步骤

准备工作

Node.js: 确保你已经安装了 Node.js（建议版本 14.x 或更高）。
npm 或 yarn: 安装 npm 或 yarn 包管理器。

安装步骤

1. 克隆项目

首先，克隆 EpicDesigner 项目到本地：

git clone https://github.com/Kchengz/epic-designer.git

2. 进入项目目录

进入克隆下来的项目目录：

cd epic-designer

3. 安装依赖

使用 npm 或 yarn 安装项目依赖：

npm install

或

yarn install

4. 选择 UI 组件库

EpicDesigner 支持多套 UI 组件库，你可以根据需要选择其中之一进行安装和配置。

选择 Element Plus

安装 Element Plus 依赖：
```
npm install element-plus
```

在 main.ts 或 main.js 中引入并注册 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

安装 Ant Design Vue 依赖：
```
npm install ant-design-vue
```

在 main.ts 或 main.js 中引入并注册 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();

选择 Naive UI

安装 Naive UI 依赖：
```
npm install -D naive-ui
```

在 main.ts 或 main.js 中引入并注册 Naive UI：

// 引入 EpicDesigner 样式
import "epic-designer/dist/style.css";

import { setupNaiveUi } from "epic-designer/dist/ui/naiveUi";

// 注册 Naive UI
setupNaiveUi();