今天给大家推荐一个基于 vue 3 + vite 6+ typescript + element-plus 构建的后台管理前端模板，为啥推荐给大家，因为好用，我已经用了一段时间啦，还因为我想记录下来，方便之后查找。
项目简介
vue3-element-admin 基于 Vue3、Vite7、TypeScript 和 Element-Plus 搭建的极简开箱即用企业级后台管理前端模板，作者还配套了对应的后端接口，java后端和nodejs后端，真正做到了开箱即用。
项目特色
– 简洁易用：基于 vue-element-admin 升级的 Vue3 版本，无过渡封装 ，易上手。
– 数据交互： 支持 `Mock` 数据
-系统功能：提供用户管理、角色管理、菜单管理、部门管理、字典管理、系统配置、通知公告等功能模块。
– 权限管理： 支持动态路由、按钮权限、角色权限和数据权限等多种权限管理方式。
– 基础设施： 提供国际化、多布局、暗黑模式、全屏、水印、接口文档和代码生成器等功能。
演示效果图
项目启动
快速开始
# 克隆代码
git clone 见下方
# 切换目录
cd vue3-element-admin
# 安装 pnpm
npm install pnpm -g
# 设置镜像源(可忽略)
pnpm config set registry https://registry.npmmirror.com
# 安装依赖
pnpm install
# 启动运行
pnpm run dev项目部署
执行 `pnpm run build` 命令后，项目将被打包并生成 `dist` 目录。接下来，将 `dist` 目录下的文件上传到服务器 `/usr/share/nginx/html` 目录下，并配置 Nginx 进行反向代理。
pnpm run build以下是 Nginx 的配置示例：
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/;
}
}
