长城汽车软件包管理平台
编辑 | blame | 历史 | 原始文档
vue3-element-admin

vue3-element-admin

![](https://foruda.gitee.com/images/1708618984641188532/a7cca095_716974.png "rainbow.png")

项目简介

vue3-element-templatevue3-element-admin 精简的 Vue3 中后台开发模板,采用 Vue3 + Vite6 + TypeScript5 + Element-Plus + Pinia 等前沿技术栈构建,配套提供 Java 后端Node 后端,完全免费开源。

项目特色

  • 🚀 核心优势
  • 技术升级:基于经典项目 vue-element-admin 的 Vue3 重构版,避免过度封装,学习曲线平缓
  • 开箱即用:预设代码规范、Git 提交规范和工程化配置,内置常用业务组件
  • 全栈方案:支持本地 Mock 和线上 API 切换,配套 Java 后端系统在线接口文档
  • 🛡️ 权限体系

  • 完整功能:用户/角色/菜单/字典/部门五位一体的权限管理系统
  • 精细控制:动态路由加载 + 按钮级权限控制,支持国际化多语言方案
  • 🛠️ 持续维护

  • 版本更新:持续跟进主流技术更新,定期升级依赖和工具链
  • 多端适配:提供基础版、开发版、精简版多种形态,满足不同场景需求

项目预览

明亮模式

暗黑模式

接口文档

项目源码

版本类型 功能亮点 Gitee 源码 GitHub 源码 GitCode 镜像
基础版 ✅ 权限体系 + 🌐 国际化 + 🛠️ 代码生成 + 🎥 演示案例 vue3-element-admin vue3-element-admin vue3-element-admin
开发版 ✅ 权限系统 + 📦 基础功能 vue3-element-template vue3-element-template vue3-element-template

| 精简版 | 🔐 基础登录 + 🧩 最小功能集 | vue3-element-admin-thin | vue3-element-admin-thin | - |
| Java 后端 | 🏗️ SpringBoot 全栈解决方案 | youlai-boot | youlai-boot | youlai-boot |
| Node 后端 | 🚀 NestJS 全栈解决方案 | youlai-nest | youlai-nest | youlai-nest |

环境准备

环境 名称版本 下载地址
开发工具 VSCode 下载
运行环境 Node ≥18 (其中 20.6.0 版本不可用) 下载

项目启动

# 克隆代码
git clone https://gitee.com/youlaiorg/vue3-element-template.git

# 切换目录
cd vue3-element-template

# 安装 pnpm
npm install pnpm -g

# 设置镜像源(可忽略)
pnpm config set registry https://registry.npmmirror.com

# 安装依赖
pnpm install

# 启动运行
pnpm run dev

项目部署

# 项目打包
pnpm run build

# 上传文件至远程服务器
将本地打包生成的 dist 目录下的所有文件拷贝至服务器的 /usr/share/nginx/html 目录。

# nginx.cofig 配置
server {
	listen     80;
	server_name  localhost;
	location / {
			root /usr/share/nginx/html;
			index index.html index.htm;
	}
	# 反向代理配置
	location /prod-api/ {
      # api.youlai.tech 替换后端API地址,注意保留后面的斜杠 /
      proxy_pass http://api.youlai.tech/;
	}
}

本地Mock

项目同时支持在线和本地 Mock 接口,默认使用线上接口,如需替换为 Mock 接口,修改文件 .env.developmentVITE_MOCK_DEV_SERVERtrue 即可

后端接口

如果您具备Java开发基础,按照以下步骤将在线接口转为本地后端接口,创建企业级前后端分离开发环境,助您走向全栈之路。

  1. 获取基于 JavaSpringBoot 开发的后端 youlai-boot 源码。
  2. 根据后端工程的说明文档 README.md 完成本地启动。
  3. 修改 .env.development 文件中的 VITE_APP_API_URL 的值,将其从 https://api.youlai.tech 更改为 http://localhost:8989 即可。

注意事项

  • 自动导入插件自动生成默认关闭

模板项目的组件类型声明已自动生成。如果添加和使用新的组件,请按照图示方法开启自动生成。在自动生成完成后,记得将其设置为 false,避免重复执行引发冲突。

![](https://foruda.gitee.com/images/1687755823137387608/412ea803_716974.png)

  • 项目启动浏览器访问空白

请升级浏览器尝试,低版本浏览器内核可能不支持某些新的 JavaScript 语法,比如可选链操作符 ?.

  • 项目同步仓库更新升级

项目同步仓库更新升级之后,建议 pnpm install 安装更新依赖之后启动 。

  • 项目组件、函数和引用爆红

    重启 VSCode 尝试

  • 其他问题

如果有其他问题或者建议,建议 ISSUE

项目文档

提交规范

执行 pnpm run commit 唤起 git commit 交互,根据提示完成信息的输入和选择。

![](https://foruda.gitee.com/images/1687755823165218215/c1705416_716974.png)

项目统计

![](https://repobeats.axiom.co/api/embed/aa7cca3d6fa9c308fc659fa6e09af9a1910506c3.svg "Repobeats analytics image")

Thanks to all the contributors!

contributors

G-Star

![](https://foruda.gitee.com/images/1728577513089814203/95f2a70d_716974.jpeg)

加群交流

关注「有来技术」公众号,点击菜单“交流群”获取加群二维码。

如果二维码过期,请加微信(haoxianrui)备注「前端」、「后端」或「全栈」拉你进群。

交流群仅限技术交流,为过滤广告营销暂设此门槛,感谢理解与配合

有来技术公众号二维码

编辑 | blame | 历史 | 原始文档

2.11.5 (2024/6/18)

✨ feat

🐛 fix

  • vue-dev-tools 插件导致菜单路由切换卡死,暂时关闭 (28349e) @haoxianrui

2.11.4 (2024/6/16)

✨ feat

♻️ refactor

  • 更换权限分配弹窗类型为 drawer 并添加父子联动开关(2d9193) @haoxianrui

2.11.3 (2024/6/11)

✨ feat

♻️ refactor

🐛 fix

2.11.2 (2024/6/8)

✨ feat

♻️ refactor

🐛 fix

2.11.1 (2024/6/6)

✨ feat

♻️ refactor

🐛 fix

2.11.0 (2024/5/27)

✨ feat

  • 菜单添加路由参数设置(author by haoxianrui
  • 增加列表选择组件(author by cshaptx4869
  • 增加列表选择组件使用示例(author by cshaptx4869
  • 增加defaultToolbar配置参数(author by cshaptx4869
  • 表单弹窗支持drawer模式(author by cshaptx4869
  • 表单项增加computed和watchEffect配置(author by cshaptx4869
  • 支持switch属性修改(author by cshaptx4869
  • 表单项增加文本类型支持(author by cshaptx4869
  • 列表列增加show配置项(author by cshaptx4869
  • 支持搜索表单显隐控制(author by cshaptx4869
  • 支持input属性修改(author by cshaptx4869
  • search配置新增函数能力拓展(author by xiudaozhe
  • 表格新增列设置控制(author by haoxianrui
  • 搜索添加展开和收缩(author by haoxianrui
  • watch函数增加配置项参数返回(author by cshaptx4869

♻️ refactor

  • 重构图标选择组件(author by cshaptx4869
  • 重构列表选择组件默认样式 (author by cshaptx4869
  • 加强对话框表单组件和列表选择组件(author by cshaptx4869
  • routeMeta增加alwaysShow字段声明(author by cshaptx4869
  • 分页组件增加溢出滚动效果(author by cshaptx4869
  • 修正登录表单的Ref类型(author by cshaptx4869
  • 点击表格刷新按钮不重置页码(author by cshaptx4869
  • 筛选列超出一定高度滚动(author by cshaptx4869
  • 优化加强initFn函数,表单项增加initFn函数(author by cshaptx4869
  • 重构watch、computed、watchEffect调用(author by cshaptx4869
  • 修改操作成功提示(author by cshaptx4869
  • PageSearch 改用card作为容器,样式改用unocss写法(author by cshaptx4869
  • 优化首页 loading 动画效果author by haoxianrui

🐛 fix

  • 路由是否始终显示不限制只有顶级目录才有的配置,开放至菜单 (author by haoxianrui
  • sockjs-client 报错 global is not defined 导致开发环境无法打开 WebSocket 页面问题修复 (author by haoxianrui
  • 发送用户重启密码功能,最少为6位字符(小于6位登陆时不允许的问题) (author by dreamnyj
  • 修复系统设置面板滚动条问题(author by cshaptx4869
  • 修复表单插槽失效问题(author by cshaptx4869
  • 修改tagsview刷新丢失query问题(author by xiudaozhe

📦️ build

  • 升级 NPM 包版本至最新 (author by haoxianrui

⚙️ ci

2.10.1 (2024/5/4)

♻️ refactor

  • 抽离CURD的使用部分代码为Hooks实现(author by cshaptx4869
  • 修改CURD导入权限点标识名(author by cshaptx4869
  • cURD表单字段支持watch监听(author by cshaptx4869
  • cURD表单input支持number修饰(author by cshaptx4869
  • cURD表单组件支持checkbox多选框(author by cshaptx4869
  • 优化axios响应数据TS类型提示(author by cshaptx4869
  • 修改CURD表单组件自定义类型的attrs传值(author by cshaptx4869
  • 同步重置密码按钮权限标识重命名(author by haoxianrui
  • 重构API为静态方法实现模块化管理,并将types.ts重命名为model.ts用于存放接口模型定义(author by haoxianrui

🐛 fix

  • sockjs-client 报错 global is not defined 导致开发环境无法打开 WebSocket 页面问题修复 (author by haoxianrui
  • 主题颜色设置覆盖暗黑模式下el-table行激活的背景色问题修复 (author by haoxianrui
  • 修复因API接口调整而影响的调用页面的问题 (author by haoxianrui

📦️ build

  • 升级 NPM 包版本至最新 (author by haoxianrui

2.10.0 (2024/4/26)

✨ feat

  • 封装增删改查组件(author by cshaptx4869
  • 集成 vite-plugin-vue-devtools 插件(author by Tricker39
  • 增加CURD配置化实现(author by cshaptx4869

2.9.3 (2024/04/14)

✨ feat

  • 增加vue文件代码片段(author by cshaptx4869
  • 菜单 hover 背景色添加值全局SCSS变量进行控制(author by haoxianrui

♻️ refactor

  • 加强基础国际化(author by cshaptx4869
  • 增加语言和布局大小枚举类型(author by cshaptx4869
  • 增加侧边栏状态枚举类型(author by cshaptx4869
  • 使用布局枚举替换字面量(author by haoxianrui
  • 控制台使用静态数据循环渲染(author by april
  • 本地缓存的 token 变量重命名(author by haoxianrui
  • 完善 Vite 环境变量类型声明(author by haoxianrui

🐛 fix

  • 修复构建时提示iconComponent.name可能为undefined的报错 (author by wangji1042
  • 修复浏览器密码自动填充时可能存在的报错 (author by cshaptx4869
  • 修复eslint报错(author by cshaptx4869
  • 移动端下点击左侧菜单节点后关闭侧边栏(author by haoxianrui
  • 添加 size 类型断言修复类型报错(author by haoxianrui

📦️ build

  • husky9.x版本适配 (author by cshaptx4869
  • 升级 npm 包版本至最新(author by haoxianrui

2.9.2 (2024/03/05)

✨ feat

  • vscode开发扩展推荐(author by cshaptx4869
  • 完善基础增删改查Mock接口(author by haoxianrui

♻️ refactor

  • 修改login密码框功能实现(author by cshaptx4869
  • 弱化页面进入动画效果(author by cshaptx4869
  • 取消推荐TypeScript Vue Plugin (author by cshaptx4869
  • 网站加载动画替换 (author by haoxianrui
  • 优化主题和主题色监听,避免多个页面重复初始化 (author by haoxianrui

🐛 fix

  • AppMain 高度在非固定头部不正确导致出现滚动条问题修复 (author by haoxianrui
  • 修复混合模式开启固定Head时的样式问题 (author by cshaptx4869
  • 设置面板统一字体大小 (author by cshaptx4869

📦️build

  • 通过env配置控制mock服务 (author by cshaptx4869
  • 升级依赖包至最新版本 (author by haoxianrui
  • 定义vite全局常量替换项目标题和版本 (author by cshaptx4869

2.9.1 (2024/02/28)

♻️ refactor

  • 项目配置按钮移入navbar(author by cshaptx4869
  • 优化user数据定义(author by cshaptx4869
  • 统一设置栏的 SVG 图标风格

🐛 fix

  • 规整一些开发依赖(author by cshaptx4869
  • 修复登录页主题切换问题 (author by cshaptx4869

🚀 pref

2.9.0 (2024/02/25)

✨ feat

  • 引入 animate.css 动画库
  • 新增水印和配置
  • 动态路由菜单支持 element plus 的图标

♻️ refactor

  • Layout 布局重构和相关问题修复
  • sass 使用 @use 替代 @import 引入外部文件指令

🐛 fix

  • 修复管理页面部分弹窗无法打开问题
  • 主题颜色设置按钮 hover 等未变化问题修复

2.8.1 (2024/01/10)

✨ feat

  • 替换 Mock 解决方案 vite-plugin-mock 为 vite-plugin-mock-dev-server 适配 Vite5

2.8.0 (2023/12/27)

⬆️ chore

  • 升级 Vite4 至 Vite5

2.7.1 (2023/12/12)

♻️ refactor

  • 将打包后的文件进行分类 (author by ityangzhiwen

2.7.0 (2023/11/19)

♻️ refactor

  • 代码重构优化
  • 修改自动导入组件类型声明文件路径
  • 完善 typescript 类型

🐛 fix

  • 修复管理页面部分弹窗无法打开问题

2.7.0 (2023/11/19)

♻️ refactor

  • 代码重构
  • 修改自动导入组件类型声明文件路径
  • 完善 typescript 类型

🐛 fix

  • 修复管理页面部分弹窗无法打开问题

2.6.3 (2023/10/22)

✨ feat

  • 菜单管理新增目录只有一级子路由是否始终显示(alwaysShow)和路由页面是否缓存(keepAlive)的配置
  • 接口文档新增 swagger、knife4j
  • 引入和支持 tsx

♻️ refactor

  • 代码瘦身,整理并删除未使用的 svg
  • 控制台样式优化

🐛 fix

  • 菜单栏折叠和展开的图标暗黑模式显示问题修复

2.6.2 (2023/10/11)

🐛 fix

  • 主题设置未持久化问题
  • UnoCSS 插件无智能提示

♻️ refactor

  • WebSocket 演示样式和代码优化
  • 用户管理代码重构

2.6.1 (2023/9/4)

🐛 fix

  • 导航顶部模式、混合模式样式在固定 Header 出现的样式问题修复
  • 固定 Header 没有持久化问题修复
  • 字典回显兼容 String 和 Number 类型

2.6.0 (2023/8/24)💥💥💥

✨ feat

  • 导航顶部模式、混合模式支持(author by april-tong
  • 平台文档(内嵌)(author by april-tong

2.5.0 (2023/8/8)

✨ feat

  • 新增 Mock(author by ygcaicn
  • 图标 DEMO(author by ygcaicn

🐛 fix

  • 字典支持 Number 类型

2.4.1 (2023/7/20)

✨ feat

  • 整合 vite-plugin-compression 插件打包优化(3.66MB → 1.58MB) (author by april-tong
  • 字典组件封装(author by haoxr

🐛 fix

  • 分页组件hidden无效
  • 签名无法保存至后端
  • Git 提交 stylelint 校验部分机器报错

2.4.0 (2023/6/17)

✨ feat

  • 新增组件标签输入框(author by april-tong
  • 新增组件签名(author by april-tong
  • 新增组件表格(author by april-tong
  • Echarts 图表添加下载功能 author by april-tong

♻️ refactor

  • 限制包管理器为 pnpm 和 node 版本16+
  • 自定义组件自动导入配置
  • 搜索框样式写法优化

🐛 fix

  • 用户导入的部门回显成数字问题修复

⬆️ chore

  • element-plus 版本升级 2.3.5 → 2.3.6

2.3.1 (2023/5/21)

🔄 refactor

  • 组件示例文件名称优化

2.2.2 (2023/5/11)

✨ feat

  • 组件封装示例添加源码地址
  • 角色、菜单、部门、字段按钮添加权限控制

2.3.0 (2023/5/12)

⬆️ chore

  • vue 版本升级 3.2.45 → 3.3.1 (CHANGELOG)
  • vite 版本升级 4.3.1 → 4.3.5

♻️ refactor

  • 使用 vue 3.3 版本新特性 defineOptionssetup 定义组件名称,移除重复的 script 标签

2.2.2 (2023/5/11)

✨ feat

  • 用户新增提交添加 vueUseuseDebounceFn 函数实现按钮防抖节流

2.2.1 (2023/4/25)

🐛 fix

  • 图标选择器组件使用 onClickOutside 未排除下拉弹出框元素导致无法输入搜索。
编辑 | blame | 历史 | 原始文档
MIT License

Copyright (c) 2021-present 有来开源组织

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
CHANGELOG 19 KB
README.en-US 8 KB
README 9 KB