7. vue3-element-admin 二次开发图文教程

vue3-element-admin 二次开发图文教程

- [1.1 写在前面的话](#1.1 写在前面的话)
- [1.2 vue3-element-admin 项目简介](#1.2 vue3-element-admin 项目简介)
- [1.3 vue3-element-admin 项目特色](#1.3 vue3-element-admin 项目特色)
- [1.4 项目源码](#1.4 项目源码)
- [1.5 开发指南](#1.5 开发指南)
- [1.6 项目启动](#1.6 项目启动)
- [1.7 项目部署](#1.7 项目部署)
- [1.8 本地Mock](#1.8 本地Mock)
- [1.9 后端接口](#1.9 后端接口)
- [1.10 注意事项](#1.10 注意事项)

1.1 写在前面的话

其实作为后端开发，我们本不该花费过多精力去研究Vue。

但是如果去的不是大厂，而是初创公司，那么对于研发的职责并没有那么清晰的边界，我们除了开发后台相关的业务逻辑之外，还需要一个强大的后台管理框架来支撑我们的梦想。

尽管网上有大量的基于Jquery 和BootStrap 的框架供我们后端拿来使用，博主之前也是使用H+ ,H-ui-Admin 等开源后台管理框架，但是当在我试用了Vue的数据双向绑定之后，感觉真香。

于是博主决定尝试学习新技术，寻找一个更为强大的基于Vue 的后台管理框架。

后来我在一个前端好朋友那里淘到了这款神器级的后台管理UI框架------vue-element-admin.

这个框架好处在于功能相当强大的同时，基本上把vue 2.x 目前最先进的各种技术都应用的淋漓尽致。

关于基于vue2 的vue-element-admin框架的使用说明参见：Vue入门实战教程之vue-element-admin初体验

这个前端管理框架好虽然好，但是前端技术在不断更新，vue2如今已发展到vue3版本，但是原来的博主并没有继续更新升级。

因此博主继续寻觅基于vue3的vue3-element-admin框架，最终终于找到了一个各方面还原度几乎百分百且比之前增强了很多的前端框架------vue3-element-admin。

1.2 vue3-element-admin 项目简介

在线预览地址 ：https://vue.youlai.tech/#/login?redirect=/dashboard
源码地址 ：vue3-element-admin

vue3-element-admin 基于 Vue3、Vite7、TypeScript 和 Element-Plus 搭建的极简开箱即用企业级后台管理前端模板。

配套 Java 后端 youlai-boot、多租户后端 youlai-boot-tenant 和 Node 后端 youlai-nest 。提供开发简版vue3-element-template 和 JS 版本vue3-element-admin-js 供开发者快速开发。

1.3 vue3-element-admin 项目特色

简洁易用 ：基于 vue-element-admin 升级的 Vue3 版本，无过渡封装，易上手。
数据交互 ：支持 Mock 数据和线上接口文档，并提供配套的 Java 和 Node 后端源码。
系统功能： 提供用户管理、角色管理、菜单管理、部门管理、字典管理、系统配置、通知公告等功能模块。
权限管理： 支持动态路由、按钮权限、角色权限和数据权限等多种权限管理方式。
多租户： 支持多租户模式与租户隔离。
基础设施： 提供国际化、多布局、暗黑模式、全屏、水印、接口文档和代码生成器等功能。
持续更新：项目持续开源更新，实时更新工具和依赖。

1.4 项目源码

项目	Gitee	Github	GitCode
vue3-element-admin ✅	vue3-element-admin	vue3-element-admin	vue3-element-admin
vue3-element-admin JS版	vue3-element-admin-js	vue3-element-admin-js	vue3-element-admin-js
vue3-element-admin 精简版	vue3-element-template	vue3-element-template	vue3-element-template
vue-uniapp-admin 移动版	vue-uniapp-admin	vue-uniapp-admin	vue-uniapp-admin
Java 后端	youlai-boot	youlai-boot	youlai-boot
Java 多租户后端	youlai-boot-tenant	-	-
Node 后端	youlai-nest	youlai-nest	youlai-nest

1.5 开发指南

名称	地址
视频教程	https://www.bilibili.com/video/BV1eFUuYyEFj
项目搭建	基于 Vue3 + Vite + TypeScript + Element-Plus 从0到1搭建后台管理系统
官方文档	https://www.youlai.tech/vue3-element-admin
代码规范	ESLint V9 + Prettier + Stylelint + EditorConfig 约束和统一前端代码规范
提交规范	Husky + Lint-staged + Commitlint + Commitizen + cz-git 配置 Git 提交规范
接口文档	https://www.apifox.cn

1.6 项目启动

环境准备

环境类型	版本要求	备注
Node.js	`^20.19.0` 或 `>=22.12.0`	推荐使用 LTS 版本（主版本为偶数）
包管理器	`pnpm >= 8.0.0`	项目使用 pnpm 作为包管理器
开发工具	Visual Studio Code 或Trae 或WebStrom	推荐安装 Vue、TypeScript 相关插件

快速开始

首先了解这个项目的结构和依赖
检查是否有package.json文件来了解项目依赖和脚本
安装依赖
运行项目

bash 复制代码

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

# 切换目录
cd vue3-element-admin

# 安装 pnpm
npm install pnpm -g

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

# 安装依赖
pnpm install

# 启动运行
pnpm run dev

如果sudo 命令不可用，则需要使用 nvm (Node Version Manager) 来安装 Node.js，它不需要 sudo 权限。
bash 复制代码
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm 安装脚本执行时如果出现了一些错误，但已经部分安装成功，可以尝试手动加载 nvm 并检查其状态。
bash 复制代码
export NVM_DIR="$HOME/.nvm" && [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" && nvm --version
nvm 已经安装成功，现在可以使用 nvm 来安装 Node.js 20.19.0 版本，这是 package.json 中指定的推荐版本。
bash 复制代码
export NVM_DIR="$HOME/.nvm" && [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" && nvm install 20.19.0
Node.js 20.19.0 已经成功安装，现在需要安装 pnpm，因为 package.json 中指定了使用 pnpm 作为包管理器。
bash 复制代码
export NVM_DIR="$HOME/.nvm" && [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" && npm install -g pnpm
pnpm 已经成功安装，现在可以使用 pnpm 来安装项目依赖。
bash 复制代码
export NVM_DIR="$HOME/.nvm" && [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" && pnpm install
依赖已经安装成功，现在我可以使用 pnpm dev 命令来运行开发服务器，启动项目。
bash 复制代码
export NVM_DIR="$HOME/.nvm" && [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" && pnpm dev

1.7 项目部署

执行 pnpm run build 命令后，项目将被打包并生成 dist 目录。接下来，将 dist 目录下的文件上传到服务器 /usr/share/nginx/html 目录下，并配置 Nginx 进行反向代理。

bash 复制代码

pnpm run build

以下是 Nginx 的配置示例：

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/;
    }
}

更多详细信息，请参考这篇文章：Nginx 安装和配置。

1.8 本地Mock

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

1.9 后端接口

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

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

1.10 注意事项

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

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

请升级浏览器尝试，低版本浏览器内核可能不支持某些新的 JavaScript 语法，比如可选链操作符 ?.。
项目同步仓库更新升级

项目同步仓库更新升级之后，建议 pnpm install 安装更新依赖之后启动。
项目组件、函数和引用爆红

重启 VSCode 尝试
其他问题

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