# element-admin-vue

**Repository Path**: opensouce_fx/element-admin-vue

## Basic Information

- **Project Name**: element-admin-vue
- **Description**: 一个使用element-plus + vue3构建的一个后台权限模板
1、技术栈：vue3新全家桶、element-plus、vite4、scss、axios等
2、vue-cli版本为5.x；版本使用脚手架搭建
3、react版本在另一个仓库
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: vite
- **Homepage**: https://xujianchen.gitee.io/v-admin
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2023-02-16
- **Last Updated**: 2023-02-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Author: 徐建辰
 * @Date: 2022-07-18 10:47:33
 * @LastEditTime: 2022-12-15 12:48:15
 * @LastEditors: Xujianchen
 * @Description: README.md
-->
<div align="center">

![logo](./src/assets/images/logo.png)

<p align="center">
	<a href="https://v3.vuejs.org/" target="_blank">
		<img src="https://shields.io/badge/Vite.js-4.x-green" alt="Vite 3.x">
	</a>
	<a href="https://v3.vuejs.org/" target="_blank">
		<img src="https://img.shields.io/badge/Vue.js-3.x-green" alt="Vue 3.x">
	</a>
	<a href="https://router.vuejs.org/zh/">
		<img src="https://img.shields.io/badge/Vue-Router-latest" alt="Vue-Router 4.x">
	</a>
	<a href="https://pinia.web3doc.top/">
		<img src="https://img.shields.io/badge/Pinia-2.x-latest" alt="Vue-Pinia 2.x">
	</a>
	<a href="https://element-plus.gitee.io/zh-CN/" target="_blank">
		<img src="https://img.shields.io/badge/element--plus-latest-blue" alt="element-plus 2.x">
	</a>
</p>

<h1>后台权限管理系统模板 - Admin</h1>

</div>

## 介绍

由于本人服务器和域名已过期，平时又用得少，数据已变成本地静态数据 😂

![logo](https://slb.lahuoyu.com/manage/assets/png/login_bg-4dfb696a.png)

## 演示和文档

| 类型       | 链接                                                     |
| ---------- | -------------------------------------------------------- |
| gitee 地址 | https://gitee.com/xujianchen/element-admin-vue/tree/vite |
| 在线地址   | https://xujianchen.gitee.io/v-admin                      |

## 重构后的特点

- **技术** 基于 vite4 + vue3 新全家桶 + element-plus
- **组件** 多个组件（高度提炼）、业务模板，根据业务一对一封装
- **权限** 完整的鉴权体系和高精度权限控制
- **布局** 提供多套布局模式，满足各种视觉需求
- **API** 完善的 API 管理，高度封装的 axios，本次重构加入取消相同请求
- **配置** 统一的全局配置和组件配置，支持 build 后配置热更新
- **性能** 根据 vue 底层原理对代码进行不断优化
- **试图** 同时兼容 PC 端和移动端，让你在手机上也能进行操作
- **样式** 高度封装的 scss 变量，为业务而封装的 css 变量方法
- **其他** 多功能视图标签、动态权限菜单、控制台组态化、统一异常处理等等

## 特征

```sh
在原有功能基础上兼容移动端；添加暗黑模式切换（通过提取element-plus变量进行样式覆盖）
使用scss尽量避免使用样式嵌套写法
```

## 安装教程

```sh
# 克隆项目
git clone xxxxxx

# 进入项目目录
cd xxx

# 安装依赖
pnpm i

# 启动项目(开发模式)
pnpm dev

# 打包
pnpm build
```

### 目录说明

```
1. assets: 静态资源存放处
2. components: 公共组件
3. config: 项目基本配置
4. const: 页面常量定义
5. directives: 指令文件
6. function: 函数库（属于同一类型的函数）
7. hooks: 全局通用hook
8. layout: 页面大布局
9. plugins: 辅助plugin
10. props: 组件props配置
11. router: 路由文件
12. service: api请求文件
13. store: 全局状态管理
14. utils: 辅助函数库
15. views: 页面文件夹
```

### Mobile Terminal Compatibility Description

```sh
1. 目前兼容移动端采用外部盒子媒体查询布局 + `el-row` 、 `el-col` 、 `el-card`内容包裹进行展示
2. 对于数据可视化想要移动端视觉效果更好一排两个可能并不是最优选择
3. 兼容移动端的同时也需要对 `element-plus` 原有样式进行覆盖，并对 `main组件` 样式及其子样式进行调整
```