# RuoYi-Vue3-UI

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

## Basic Information

- **Project Name**: RuoYi-Vue3-UI
- **Description**: 前端基于：vue-next-admin开发
后端：RuoYi-Vue-Plus
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: http://vueadmin.cnmd.icu/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 6
- **Created**: 2023-05-19
- **Last Updated**: 2023-05-19

## 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 的后台开源免费模板，希望减少工作量，帮助大家实现快速开发。

#### 🚧 安装 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 及之前版本。



## ✌在线演示

[个人中心 - 后台管理系统 (cnmd.icu)](http://vueadmin.cnmd.icu)



#### ⚡ 使用说明



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

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

```bash
# 克隆项目
git clone https://gitee.com/lyt-top/vue-next-admin.git

# 进入项目
cd vue-next-admin

# 安装依赖
cnpm install

# 运行项目
cnpm run dev

# 打包发布
cnpm 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

```
export function backEndComponent(routes: any) {
	if (!routes) return;
	return routes.map((item: any) => {
		if (item.query) {
			item.query = JSON.parse(item.query)
		}
		if (item.path.includes('http')) {
			if (item.query?.iframe) {
				item.path = '/iframes' + item.meta.title
				item.name = 'iframes' + item.meta.title
				item.component = '/layout/routerView/iframes.vue'
				item.meta.isIframe = true
			} else {
				item.path = '/link' + item.meta.title
				item.name = 'link' + item.meta.title
				item.component = '/layout/routerView/link.vue'
				item.meta.isIframe = false
			}
		}
		if (item.query?.isAffix) {
			item.meta.isAffix = true
			delete item.query.isAffix
		}
		if (item.component) item.component = dynamicImport(dynamicViewsModules, item.component as string);
		item.children && backEndComponent(item.children);
		return item;
	});

}
```

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

> 群号：214208060



# 演示图：
<img src="./doc/1.png" style="zoom: 25%;" />

<img src="./doc/image-20230426220326037.png" style="zoom:25%;" />

<img src="./doc/image-20230426220354822.png" style="zoom:25%;" />

<img src="./doc/220652.png" style="zoom:25%;" />