# vue3-element-plus-admin

**Repository Path**: martinkevin/vue3-element-plus-admin

## Basic Information

- **Project Name**: vue3-element-plus-admin
- **Description**: 基于Vue3+ Element-Plus+ TypeScript4+ Vite3搭建前端，后端采用Spring Boot，实现前后端分离的高效后台集成方案。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 26
- **Created**: 2025-12-04
- **Last Updated**: 2025-12-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3-element-plus-admin

#### 介绍
该方案整合了前端最新技术栈（Vue3 组合式 API、Element Plus 组件库、TypeScript 强类型、Vite 极速构建）和后端主流框架（Spring Boot），
提供了一套开箱即用的企业级后台管理系统解决方案。支持快速开发、类型安全、响应式布局和权限控制，适合中大型项目。

#### 特性

- Vue3：组合式 API，代码更简洁；
- Element Plus：基于 Vue3 的组件库，支持主题定制和国际化；
- TypeScript：完整的类型推断，减少运行时错误；
- Vite：极速启动和热更新，原生 ESM 模块支持；
- Pinia：替代 Vuex 的轻量级状态管理库；
- Axios：封装统一的 HTTP 请求工具；
- 路由守卫：基于角色的动态路由权限控制；
- 集成vue-office，支持多种文件(docx、excel、pdf、pptx)在线预览

#### 软件架构

```

vue3-admin/
├── src/
│   ├── api/               # API 请求封装
│   ├── assets/            # 静态资源
│   ├── components/        # 全局组件
│   ├── composables/       # 组合式函数
│   ├── router/            # 路由配置
│   ├── store/             # Pinia 状态管理
│   ├── styles/            # 全局样式
│   ├── utils/             # 工具函数
│   ├── views/             # 页面组件
│   ├── App.vue            # 根组件
│   └── main.ts            # 入口文件

```
#### 项目地址
[前端项目地址：https://gitee.com/xxf_0921/vue3-element-plus-admin](https://gitee.com/xxf_0921/vue3-element-plus-admin)

[服务端项目地址：https://gitee.com/xxf_0921/vue3-element-plus-api](https://gitee.com/xxf_0921/vue3-element-plus-api)

#### 安装教程

```
# 克隆项目
git clone https://github.com/your-repo/vue3-admin.git
cd vue3-admin

# 安装依赖
npm install

# 开发模式启动 (默认端口 5173)
npm run dev

# 构建生产环境
npm run build
```

#### 预览
[查看在线演示](http://120.48.15.103:8090/#/login)

![输入图片说明](wechat_2025-11-04_104851_604.png)
![输入图片说明](wechat_2025-11-04_104839_899.png)
![输入图片说明](wechat_2025-11-04_104757_419.png)
![输入图片说明](wechat_2025-11-04_104810_651.png)
![输入图片说明](wechat_2025-11-04_104821_427.png)
![输入图片说明](ScreenShot_2025-11-16_121243_487.png)
![输入图片说明](ScreenShot_2025-11-16_121233_311.png)
  
#### 如何贡献
非常欢迎您的加入！提一个 Issue 或者提交一个 Pull Request

1. 创建自己的分支: git checkout -b feat/xxxx
2. 提交您的修改: git commit -am 'feat(function): add xxxxx'
3. 推送您的分支: git push origin feat/xxxx
4. 提交pull request


#### 我的二维码

如有项目合作或项目外包，扫码加我好友，请备注来意。

![输入图片说明](ewm.jpg)