vue3-element-admin官方文档 | 在线预览

项目介绍

vue3-element-admin 是基于 Vue3 + Vite4+ TypeScript5 + Element-Plus + Pinia 等技术栈构建的后台管理前端模板（配套后端源码）。

项目特色

• 基于 vue-element-admin 升级的 Vue3 版本，主流技术栈，无过度自定义封装，极易上手，减少学习成本；
• 配套 Java 后台接口，非 Mock 数据，在线接口文档；
• 系统功能：用户、角色、菜单、字典管和部门管理等；
• 基础设施：动态路由，按钮权限，常用组件封装。

项目预览

• 在线预览地址： https://vue3.youlai.tech/

• 控制台

• 接口文档

• 权限管理系统

项目地址

项目	Gitee	Github	GitCode
前端	vue3-element-admin	vue3-element-admin	vue3-element-admin
后端	youlai-boot	youlai-boot	youlai-boot

环境准备

环境	名称版本	备注
开发工具	VSCode	下载地址
运行环境	Node 16+	下载地址
VSCode插件(必装)	1. Vue Language Features (Volar) 2. TypeScript Vue Plugin (Volar) 3. 禁用 Vetur

项目启动

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

# 安装 pnpm
npm install pnpm -g

# 安装依赖
pnpm install

# 启动运行
pnpm run dev

项目部署

# 项目打包
pnpm run build:prod

# 上传文件至远程服务器
将打包生成在 `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/ {
			proxy_pass http://vapi.youlai.tech/; # vapi.youlai.tech替换成你的后端API地址
	}
}

接口支持

• 接口调用地址：https://vapi.youlai.tech

• 接口文档地址：在线接口文档

• OpenAPI文档地址：http://vapi.youlai.tech/v3/api-docs

• 本地接口：默认使用线上接口，你可以通过以下步骤完成本地接口环境搭建：

  1. 获取基于 Java 、SpringBoot 开发的后端 youlai-boot 源码 ;
  2. 根据后端工程说明文档 README.md 完成本地启动;
  3. 替换 vite.config.ts 的代理目标地址 vapi.youlai.tech 为本地的 localhost:8989.

项目文档

• 基于 Vue3 + Vite4 + TypeScript + Element-Plus 从0到1搭建后台管理系统

• ESLint+Prettier+Stylelint+EditorConfig 约束和统一前端代码规范

• Husky + Lint-staged + Commitlint + Commitizen + cz-git 配置 Git 提交规范

Git 提交规范

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

联系我们

如果交流群的二维码已过期，请加我微信，备注「前端」或「全栈」，我将邀请您加入相应的群组。