<p align="center">
<img src="https://img.shields.io/badge/Vue-3.2.45-brightgreen.svg"/>
<img src="https://img.shields.io/badge/Vite-4.3.1-green.svg"/>
<img src="https://img.shields.io/badge/Element Plus-2.3.1-blue.svg"/>
<img src="https://img.shields.io/badge/license-MIT-green.svg"/>
<a href="https://gitee.com/youlaiorg" target="_blank">
<img src="https://img.shields.io/badge/Author-有来开源组织-orange.svg"/>
</a>
</p>
<p align="center">
<a target="_blank" href="https://www.cnblogs.com/haoxianrui/p/17331952.html">vue3-element-admin官方文档</a> | <a target="_blank" href="http://vue3.youlai.tech">在线预览</a>
</p>
## 项目介绍
[vue3-element-admin](https://gitee.com/youlaiorg/vue3-element-admin) 是基于 [vue-element-admin](https://gitee.com/panjiachen/vue-element-admin) 升级的 `Vue3` 版本后台管理框架,使用 Vue3、Vite4、TypeScript、Pinia、Element Plus 当前主流技术栈开发。
## 项目特色
- 基于 `vue-element-admin` 升级的 `Vue3` 版本,主流技术栈,无过度自定义封装,极易上手,减少学习成本;
- 配套 `Java` 后台接口,非 `Mock` 数据,[在线接口文档](https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5/api-65851240);
- 从 `0` 到 `1` 的项目文档支持,[官方文档](https://www.cnblogs.com/haoxianrui/p/16090029.html)。
- 系统功能:用户、角色、菜单、字典管和部门管理等;
- 基础设施:动态路由,按钮权限,常用组件封装。
## 技术栈
| 技术栈 | 描述 | 官网 |
| --- | --- | --- |
| Vue3 | 渐进式 JavaScript 框架 | https://v3.cn.vuejs.org/ |
| TypeScript | JavaScript 的一个超集 | https://www.tslang.cn/ |
| Vite | 前端开发与构建工具 | https://cn.vitejs.dev/ |
| Element Plus | 基于 Vue 3,面向设计师和开发者的组件库 | https://element-plus.gitee.io/zh-CN/ |
| Pinia | 新一代状态管理工具 | https://pinia.vuejs.org/ |
| Vue Router | Vue.js 的官方路由 | https://router.vuejs.org/zh/ |
## 项目预览
**在线预览地址**: [http://vue3.youlai.tech/](http://vue3.youlai.tech/)
**控制台 & 接口文档**
| ![暗黑模式](https://s2.loli.net/2023/03/13/QvjY4zf3VCGteNF.png) |
| --------------------------------------------------------------- |
| ![接口文档](https://s2.loli.net/2023/03/13/bH4J3O6WRgCUpwt.png) |
**权限管理系统**
| ![用户管理](https://s2.loli.net/2023/03/13/L9xgT5sSMVZukQj.png) | ![image-20230313003008012](https://s2.loli.net/2023/03/13/nQg6HmrtFUkPDYv.png) |
| --- | --- |
| ![image-20230313003028425](https://s2.loli.net/2023/03/13/C4fDRJeTuUO7gPI.png) | ![字典管理](https://s2.loli.net/2023/03/13/BzqjHpa64wfeWhE.png) |
## 项目地址
| | Gitee | Github |
| --- | --- | --- |
| vue3-element-admin | [vue3-element-admin](https://gitee.com/youlaiorg/vue3-element-admin) | [vue3-element-admin](https://github.com/youlaitech/vue3-element-admin) |
| 后端 | [youlai-boot](https://gitee.com/youlaiorg/youlai-boot) | [youlai-boot](https://github.com/hxrui/youlai-boot.git) |
## 环境要求
- Node 环境
版本:16+
- 开发工具
VSCode
- 必装插件
- Vue Language Features (Volar)
- TypeScript Vue Plugin (Volar)
## 项目启动
```bash
# 安装 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;
}
# 代理转发 prod-api 标识至 vapi.youlai.tech
location /prod-api/ {
proxy_pass http://vapi.youlai.tech/;
}
}
```
## 接口文档
- 接口调用地址:[vapi.youlai.tech](http://vapi.youlai.tech)
- 接口文档地址:[vue3-element-admin 在线接口文档](https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5/api-65851240)
## 本地接口
> 默认使用线上接口,你可以通过以下步骤完成本地接口环境搭建:
1. 获取基于 `Java 、SpringBoot` 开发的后端 [youlai-boot](https://gitee.com/youlaiorg/youlai-boot.git) 源码 ;
2. 根据后端工程说明文档 [README.md](https://gitee.com/youlaiorg/youlai-boot#%E9%A1%B9%E7%9B%AE%E8%BF%90%E8%A1%8C) 完成本地启动;
3. 替换 [vite.config.ts](vite.config.ts) 的代理目标地址 [vapi.youlai.tech](vapi.youlai.tech) 为本地的 [localhost:8989](localhost:8989) 。
## 关于我们
> 欢迎加我的微信,备注 `前端`、`后端`、`全栈` 进对应技术交流群
| 微信交流群 | 我的微信 |
| --- | --- |
| ![](https://s2.loli.net/2023/04/29/KA6sflk9mXTVpiM.png)| ![](https://s2.loli.net/2022/04/06/yRx8uzj4emA5QVr.jpg) |
![](https://s2.loli.net/2022/11/19/OGjum9wr8f6idLX.png)
没有合适的资源?快使用搜索试试~ 我知道了~
vue3-element-admin:vue3 + element-plus + typescript 后台管理系统
共181个文件
svg:60个
vue:47个
ts:40个
需积分: 0 39 下载量 151 浏览量
2023-05-04
19:01:54
上传
评论 7
收藏 738KB ZIP 举报
温馨提示
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板(前后端开源)。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 、 JWT 、 Redis 、 Mybatis-Plus 、 Knife4j 等技术栈搭建的前后端分离开源权限管理系统。 在线预览地址:http://vue3.youlai.tech 开源仓库地址:https://gitee.com/youlaiorg/vue3-element-admin 后端仓库地址:https://gitee.com/youlaiorg/youlai-boot
资源推荐
资源详情
资源评论
收起资源包目录
vue3-element-admin:vue3 + element-plus + typescript 后台管理系统 (181个子文件)
commitlint.config.cjs 4KB
.prettierrc.cjs 2KB
.stylelintrc.cjs 1KB
.eslintrc.cjs 1KB
commit-msg 80B
.env.development 192B
.editorconfig 454B
.eslintignore 116B
401.gif 160KB
.gitignore 163B
index.html 474B
favicon.ico 4KB
.eslintrc-auto-import.json 7KB
package.json 3KB
tsconfig.json 872B
tsconfig.node.json 184B
LICENSE 1KB
README.md 5KB
CHANGELOG.md 140B
indicator.png 334KB
404.png 96KB
logo.png 7KB
404_cloud.png 5KB
pre-commit 67B
.prettierignore 68B
.env.production 130B
sidebar.scss 4KB
reset.scss 1KB
dark.scss 725B
variables.scss 470B
index.scss 335B
variables.module.scss 157B
.env.staging 128B
.stylelintignore 68B
brand.svg 6KB
number.svg 3KB
redis.svg 3KB
lab.svg 3KB
security.svg 2KB
valid_code.svg 2KB
verify_code.svg 2KB
dashboard.svg 2KB
cascader.svg 2KB
api.svg 2KB
coupon.svg 2KB
dict.svg 2KB
peoples.svg 2KB
homepage.svg 2KB
goods-list.svg 2KB
password.svg 2KB
exit-fullscreen.svg 2KB
tree.svg 2KB
rate.svg 2KB
github.svg 2KB
bug.svg 2KB
publish.svg 2KB
client.svg 2KB
shopping.svg 1KB
role.svg 1KB
system.svg 1KB
menu.svg 1KB
eye-open.svg 1KB
order.svg 1KB
multi_level.svg 1KB
perm.svg 1KB
goods.svg 1KB
skill.svg 1KB
download.svg 1KB
message.svg 1KB
advert.svg 1024B
link.svg 1001B
uv.svg 988B
user.svg 959B
eye.svg 944B
dict_item.svg 927B
money.svg 914B
document.svg 909B
monitor.svg 883B
nested.svg 821B
edit.svg 818B
language.svg 730B
close_right.svg 693B
theme.svg 689B
close_left.svg 647B
refresh.svg 561B
fullscreen.svg 421B
close.svg 395B
rabbitmq.svg 367B
drag.svg 356B
guide.svg 320B
close_other.svg 284B
close_all.svg 279B
size.svg 211B
chart.svg 179B
auto-imports.d.ts 39KB
tagsView.ts 6KB
components.d.ts 5KB
index.ts 3KB
vite.config.ts 3KB
permission.ts 3KB
共 181 条
- 1
- 2
资源评论
有来技术
- 粉丝: 1w+
- 资源: 5
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功