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

1. 项目基础介绍

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

主要编程语言

• JavaScript
• TypeScript

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

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

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

准备工作

1. Node.js: 确保你已经安装了 Node.js（建议版本 14.x 或更高）。
2. 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

1. 安装 Element Plus 依赖：

   npm install element-plus
   

2. 在 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

1. 安装 Ant Design Vue 依赖：

   npm install ant-design-vue
   

2. 在 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

1. 安装 Naive UI 依赖：

   npm install -D naive-ui
   

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

   // 引入 EpicDesigner 样式
   import "epic-designer/dist/style.css";
   
   import { setupNaiveUi } from "epic-designer/dist/ui/naiveUi";
   
   // 注册 Naive UI
   setupNaiveUi();
   

5. 运行项目

安装并配置好 UI 组件库后，可以运行项目：

npm run dev

或

yarn dev

总结

通过以上步骤，你已经成功安装并配置了 EpicDesigner 项目。你可以根据需要选择不同的 UI 组件库，并开始使用这个强大的低代码设计器来快速生成页面。