一套基于 Vue3、Vite、TypeScript 和 Element-Plus 搭建的极简开箱即用企业级后台管理前端模板，开源免费！

项目介绍

Vue3-Element-Admin 是一个基于 Vue3、Vite7、TypeScript 和 Element-Plus 搭建的极简开箱即用企业级后台管理前端模板。该项目旨在提供一个高效、易用且功能丰富的后台管理系统开发基础，配套有 Java 后端（youlai-boot）、多租户后端（youlai-boot-tenant）和 Node 后端（youlai-nest）的源码，支持快速开发企业级前后端分离的应用。

应用场景

Vue3-Element-Admin 适用于各类需要后台管理系统的企业级应用开发，包括但不限于：

• 内容管理系统（CMS）
• 客户关系管理系统（CRM）
• 电子商务后台管理
• 数据可视化平台
• 多租户管理系统
• 其他需要权限管理和复杂数据交互的企业应用

功能模块

系统功能

• 用户管理：包括用户信息的增删改查、用户状态管理等。
• 角色管理：定义系统角色，分配权限。
• 菜单管理：配置系统菜单，支持动态路由。
• 部门管理：管理企业内部部门结构。
• 字典管理：管理系统中的字典数据，如状态码、类型等。
• 系统配置：配置系统全局参数，如接口地址、主题等。
• 通知公告：发布和管理系统通知。

权限管理

• 动态路由：根据用户角色动态生成路由。
• 按钮权限：控制用户对特定按钮的访问权限。
• 角色权限：为不同角色分配不同的系统功能权限。
• 数据权限：控制用户对数据的访问范围。

多租户支持

• 支持多租户模式，实现租户间的数据隔离。

基础设施

• 国际化：支持多语言切换。
• 多布局：提供多种页面布局选择。
• 暗黑模式：支持暗黑主题切换。
• 全屏功能：支持页面全屏显示。
• 水印功能：为页面添加水印，增强安全性。
• 接口文档：集成接口文档，方便前后端联调。
• 代码生成器：自动生成基础代码，提高开发效率。

功能特点

• 简洁易用：基于 vue-element-admin 升级的 Vue3 版本，无过度封装，易上手。
• 数据交互：支持 Mock 数据和线上接口文档，提供配套的 Java 和 Node 后端源码。
• 持续更新：项目持续开源更新，实时更新工具和依赖。
• 高效开发：提供开发简版（vue3-element-template）和 JS 版本（vue3-element-admin-js），满足不同开发需求。

项目技术栈

• • 前端框架: Vue3
  • 构建工具: Vite7
  • 编程语言: TypeScript
  • UI 组件库: Element-Plus
  • 状态管理: Pinia
  • 路由管理: Vue Router
  • HTTP 客户端: Axios
  • 代码规范: ESLint + Prettier + Stylelint + EditorConfig
  • 提交规范: Husky + Lint-staged + Commitlint + Commitizen + cz-git

• 包管理器: pnpm

项目结构

├── .husky               # Git 钩子配置
├── .vscode              # VSCode 配置
├── licenses              # 许可证文件
├── mock                 # Mock 数据
├── public                # 静态资源
├── src                  # 源代码
│   ├── api              # 接口请求
│   ├── assets           # 静态资源
│   ├── components        # 公共组件
│   ├── composables       # 组合式函数
│   ├── directives        # 自定义指令
│   ├── layouts           # 布局组件
│   ├── router            # 路由配置
│   ├── store             # Pinia 状态管理
│   ├── styles            # 全局样式
│   ├── utils             # 工具函数
│   ├── views             # 页面组件
│   ├── App.vue          # 根组件
│   └── main.ts          # 入口文件
├── tests                # 测试文件
├── types                # TypeScript 类型定义
├── .editorconfig        # 编辑器配置
├── .env.development     # 开发环境配置
├── .env.production      # 生产环境配置
├── .eslintrc-auto-import.json # ESLint 自动导入配置
├── .gitignore           # Git 忽略文件
├── .prettierignore      # Prettier 忽略文件
├── .prettierrc.yaml     # Prettier 配置
├── .stylelintignore      # Stylelint 忽略文件
├── .stylelintrc.cjs     # Stylelint 配置
├── CHANGELOG.md         # 更新日志
├── LICENSE              # 开源许可证
├── README.md            # 项目说明
├── commitlint.config.cjs # Commitlint 配置
├── eslint.config.ts     # ESLint 配置
├── index.html           # HTML 模板
├── package.json         # 项目依赖
├── pnpm-lock.yaml       # pnpm 锁文件
├── tsconfig.eslint.json # TypeScript ESLint 配置
├── tsconfig.json        # TypeScript 配置
├── uno.config.ts        # UnoCSS 配置
├── vite.config.ts       # Vite 配置
└── vitest.config.ts     # Vitest 配置

功能演示

开源地址

https://gitee.com/youlaiorg/vue3-element-admin