<div align="center">
<img src="https://img.shields.io/badge/Vue-3.4.21-brightgreen.svg"/>
<img src="https://img.shields.io/badge/Vite-5.1.5-green.svg"/>
<img src="https://img.shields.io/badge/Element Plus-2.6.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>
<div align="center"> 中文 | <a href="./README.en-US.md">English</div>
</div>
<div align="center">
<a target="_blank" href="http://vue3.youlai.tech">👀 在线预览</a> | <a target="_blank" href="https://juejin.cn/post/7228990409909108793">📖 阅读文档</a>
</div>
## 项目简介
[vue3-element-admin](https://gitee.com/youlaiorg/vue3-element-admin) 是基于 Vue3 + Vite5+ TypeScript5 + Element-Plus + Pinia 等主流技术栈构建的免费开源的后台管理前端模板（配套[后端源码](https://gitee.com/youlaiorg/youlai-boot)）。
## 项目特色
- **简洁易用**：基于 [vue-element-admin](https://gitee.com/panjiachen/vue-element-admin) 升级的 Vue3 版本，无过渡封装 ，易上手。
- **数据交互**：同时支持本地 `Mock` 和线上接口，配套 [Java 后端源码](https://gitee.com/youlaiorg/youlai-boot)和[在线接口文档](https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5)。
- **权限管理**：用户、角色、菜单、字典、部门等完善的权限系统功能。
- **基础设施**：动态路由、按钮权限、国际化、代码规范、Git 提交规范、常用组件封装。
- **持续更新**：2021年至今持续更新3年，及时跟进最新的技术和工具。
## 项目预览
## 项目地址
| 项目 | Gitee | Github | GitCode |
| ---- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| 前端 | [vue3-element-admin](https://gitee.com/youlaiorg/vue3-element-admin) | [vue3-element-admin](https://github.com/youlaitech/vue3-element-admin) | [vue3-element-admin](https://gitcode.net/youlai/vue3-element-admin) |
| 后端 | [youlai-boot](https://gitee.com/youlaiorg/youlai-boot) | [youlai-boot](https://github.com/haoxianrui/youlai-boot.git) | [youlai-boot](https://gitcode.net/youlai/youlai-boot) |
## 环境准备
| 环境 | 名称版本 | 下载地址 |
| -------------------- | :----------------------------------------------------------- | ------------------------------------------------------------ |
| **开发工具** | VSCode | [下载](https://code.visualstudio.com/Download) |
| **运行环境** | Node ≥18 | [下载](http://nodejs.cn/download) |
## 项目启动
```bash
# 克隆代码
git clone https://gitee.com/youlaiorg/vue3-element-admin.git
# 切换目录
cd vue3-element-admin
# 安装 pnpm
npm install pnpm -g
# 安装依赖
pnpm install
# 启动运行
pnpm run dev
```
## 项目部署
```bash
# 项目打包
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地址
}
}
```
## 本地Mock
项目同时支持在线和本地 Mock 接口，默认使用线上接口，如需替换为 Mock 接口，修改文件 `.env.development` 的 `VITE_MOCK_DEV_SERVER` 为 `true` **即可**。
## 后端接口
> 如果您具备Java开发基础，按照以下步骤将在线接口转为本地后端接口，创建企业级前后端分离开发环境，助您走向全栈之路。
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. 修改 `.env.development` 文件中的 `VITE_APP_API_URL` 的值，将其从 http://vapi.youlai.tech 更改为 http://localhost:8989。
## 注意事项
- **自动导入插件自动生成默认关闭**
模板项目的组件类型声明已自动生成。如果添加和使用新的组件，请按照图示方法开启自动生成。在自动生成完成后，记得将其设置为 `false`，避免重复执行引发冲突。
- **项目启动浏览器访问空白**
请升级浏览器尝试，低版本浏览器内核可能不支持某些新的 JavaScript 语法，比如可选链操作符 `?.`。
- **项目同步仓库更新升级**
项目同步仓库更新升级之后，建议 `pnpm install` 安装更新依赖之后启动 。
- **项目组件、函数和引用爆红**
重启 VSCode 尝试
- **其他问题**
如果有其他问题或者建议，建议 [ISSUE](https://gitee.com/youlaiorg/vue3-element-admin/issues/new)
## 项目文档
- [基于 Vue3 + Vite + TypeScript + Element-Plus 从0到1搭建后台管理系统](https://blog.csdn.net/u013737132/article/details/130191394)
- [ESLint+Prettier+Stylelint+EditorConfig 约束和统一前端代码规范](https://blog.csdn.net/u013737132/article/details/130190788)
- [Husky + Lint-staged + Commitlint + Commitizen + cz-git 配置 Git 提交规范](https://blog.csdn.net/u013737132/article/details/130191363)
## 提交规范
执行 `pnpm run commit` 唤起 git commit 交互，根据提示完成信息的输入和选择。
## 交流群🚀
> **关注「有来技术」公众号，获取交流群二维码。**
>
> 如果交流群的二维码过期，请加微信(haoxianrui)并备注「前端」、「后端」或「全栈」以获取最新二维码。
>
> 为确保交流群质量，防止营销广告人群混入，我们采取了此措施。望各位理解！
| 公众号 | 交流群 |
|:----:|:----:|
|  |  |
vue3基础框架封装yyds
需积分: 0 56 浏览量
2024-05-21
10:23:36
上传
评论
收藏 1.42MB ZIP 举报
vue3基础框架封装yyds （234个子文件） 
applypatch-msg 31B commitlint.config.cjs 4KB .eslintrc.cjs 3KB .prettierrc.cjs 2KB .stylelintrc.cjs 1KB vue3.3.code-snippets 465B vue3.0.code-snippets 450B vue3.2.code-snippets 346B commit-msg 39B commit-msg 31B index.css 3KB .env.development 325B .editorconfig 502B .eslintignore 130B
401.gif 159KB .gitignore 193B .gitignore 1B h 423B
index.html 2KB favicon.ico 4KB
login-bg.jpg 32KB login-bg-dark.jpg 20KB jsplumb.js 645KB mixins.js 4KB data_B.js 1KB data_C.js 856B data_A.js 808B package-lock.json 517KB .eslintrc-auto-import.json 8KB package.json 4KB settings.json 2KB tsconfig.json 995B extensions.json 231B LICENSE 1KB LICENSE 1KB LICENSE 1KB README.en-US.md 8KB README.md 7KB CHANGELOG.md 6KB
404.png 20KB logo.png 4KB 404_cloud.png 3KB post-applypatch 31B post-checkout 31B post-commit 31B post-merge 31B post-rewrite 31B pre-applypatch 31B pre-auto-gc 31B pre-commit 31B pre-commit 26B pre-push 31B pre-rebase 31B prepare-commit-msg 31B .prettierignore 90B .env.production 93B reset.scss 1KB variables.scss 983B index.scss 542B variables.module.scss 303B husky.sh 0B .stylelintignore 90B
money.svg 2KB captcha.svg 2KB api.svg 2KB dict.svg 2KB security.svg 2KB client.svg 1KB order.svg 1KB peoples.svg 1KB system.svg 1KB eye-open.svg 1KB tree.svg 1KB menu.svg 1KB homepage.svg 1KB project.svg 1KB github.svg 1019B todolist.svg 992B download.svg 962B message.svg 949B eye.svg 944B cascader.svg 941B role.svg 925B link.svg 909B user.svg 886B publish.svg 877B edit.svg 817B visit.svg 774B document.svg 640B ip.svg 535B monitor.svg 525B lock.svg 512B language.svg 501B sunny.svg 473B refresh.svg 458B table.svg 351B close_right.svg 311B close_left.svg 310B close.svg 297B moon.svg 272B共 234 条
- 1
- 2
- 3
资源评论
