# vue3+vite+elementPlus后台管理模板

**Repository Path**: chenlirong/vue3_vite_elementPlus

## Basic Information

- **Project Name**: vue3+vite+elementPlus后台管理模板
- **Description**: vue3+vite+elementPlus后台管理模板(直接使用)
- **Primary Language**: HTML
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 9
- **Forks**: 2
- **Created**: 2021-10-15
- **Last Updated**: 2025-04-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3后台管理自己封装的

## README

# vue3+vite+elementPlus 后台管理
## elementPlus官网：https://element-plus.gitee.io/zh-CN/ ##

------

## 项目运行 ##

```python
yarn
yarn dev
yarn build:beta //测试打包
yarn build:release //正式打包
```

## 项目公共方法 src\utils\index.js ##

使用时需要对应引入方法名称（示例: import { localSet,localSet } from "@/utils";）

> * localGet  ---获取缓存
> * localSet  ---存入缓存
> * localRemove  ---清空所有缓存
> * localEmpty  ---删除缓存
> * @qiniuUploadImg ---七牛云上传图片
> * @ossUploadImg  ---oss上传图片
> * getAddressOptions  ---三级联动获取地址
> * addressContext  ---根据地址ID获取地址名称
> * accDiv  ---除法
> * accMul  ---乘法
> * accAdd  ---加法

## mock模拟了权限管理和登录 ##

```python
//正式开发要注释掉mock（在：vite.config.js）
viteMockServe({
    mockPath: "./src/mock",
    supportTs: false
}),
```

## 主要文件介绍 ##

> * src\views\Home copy.vue  ---模板页面（展示了axios、vuex的使用）
> * src\assets\css\common.scss  ---公共样式
> * src\assets\icon\iconfont.css  ---阿里矢量图标（可自己创建阿里矢量图标项目后覆盖该文件）

## 项目图片展示 ##
![](https://s3.bmp.ovh/imgs/2022/03/c340074b655cfcdb.png)
![](https://s3.bmp.ovh/imgs/2022/03/1341c3d35bf0c1f4.png)
![](https://s3.bmp.ovh/imgs/2022/03/c992234b7499a1e2.png)
![](https://s3.bmp.ovh/imgs/2022/03/c43da0f3401d03c0.png)