# RuoYi-Vue3-UI

**Repository Path**: codelemons/RuoYi-Vue3-UI

## Basic Information

- **Project Name**: RuoYi-Vue3-UI
- **Description**: 前端基于：vue-next-admin开发
后端：RuoYi-Vue-Plus
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: 5.X
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 18
- **Created**: 2023-08-29
- **Last Updated**: 2023-08-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<img src="https://foruda.gitee.com/images/1679673773341074847/178e8451_1766278.png" width="50%" height="50%">

<div style="height: 10px; clear: both;"></div>

- - -
## 平台简介

# 本框架为RuoYi-Vue-Plus第三方扩展的前端项目

基于 vue3.x + CompositionAPI setup 语法糖 + typescript + vite + element plus + vue-router-next + pinia 技术，适配手机、平板、pc 的后台开源免费模板，希望减少工作量，帮助大家实现快速开发。



## ✌在线演示

已经停用演示，小服务器经常被DD🙄看演示图吧👇

[4.x稳定版演示地址 (cnmd.icu)](http://vueadmin.cnmd.icu)

[5.x演示地址 (cnmd.icu)](http://5x.cnmd.icu)


#### 🚧 支持安装 cnpm、yarn 运行

- 复制代码(桌面 cmd 运行) `npm install -g cnpm --registry=https://registry.npm.taobao.org`
- 复制代码(桌面 cmd 运行) `npm install -g yarn`

#### 🏭 环境支持

| Edge      | Firefox      | Chrome      | Safari      |
| --------- | ------------ | ----------- | ----------- |
| Edge ≥ 88 | Firefox ≥ 78 | Chrome ≥ 87 | Safari ≥ 13 |

> 由于 Vue3 不再支持 IE11，故而 ElementPlus 也不支持 IE11 及之前版本。

#### ⚡ 使用说明


建议使用 npm，cnpm,因为 yarn 有时会报错。< href="http://nodejs.cn/" target="_blank">node 版本 > 16.18.0+/18+</a>

> Vite 不再支持 Node 12 / 13 / 15，因为上述版本已经进入了 EOL 阶段。现在你必须使用 Node 16.18+ / 18+ 版本。

```bash
# 克隆项目
git clone https://gitee.com/hhhbx/RuoYi-Vue3-UI.git

# 进入项目
cd RuoYi-Vue3-UI

# 安装依赖
npm install

# 运行项目
npm run dev

# 打包发布
npm run build
```

#### 📚 开发文档

- 查看前端开发文档：<a href="https://lyt-top.gitee.io/vue-next-admin-doc-preview" target="_blank">vue-next-admin-doc</a>
- 后端开发文档：<a href="https://gitee.com/dromara/RuoYi-Vue-Plus/wikis/pages" target="_blank">Rouyi-Vue-Plus</a>

## ⚡差异说明

后端端路由自定义地址：src\router\backEnd.ts

#### 💯 学习交流加 QQ 群

> 群号：214208060



# 演示图：
<img src="./doc/a1.png" style="zoom: 25%;" />
<img src="./doc/a2.png" style="zoom: 25%;" />
<img src="./doc/a3.png" style="zoom: 25%;" />
<img src="./doc/a4.png" style="zoom: 25%;" />
<img src="./doc/a5.png" style="zoom: 25%;" />