EpicDesigner 安装和配置指南
epic-designer 项目地址: https://gitcode.com/gh_mirrors/ep/epic-designer
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();
5. 运行项目
安装并配置好 UI 组件库后,可以运行项目:
npm run dev
或
yarn dev
总结
通过以上步骤,你已经成功安装并配置了 EpicDesigner 项目。你可以根据需要选择不同的 UI 组件库,并开始使用这个强大的低代码设计器来快速生成页面。
epic-designer 项目地址: https://gitcode.com/gh_mirrors/ep/epic-designer