嗨,大家好,我是小华同学,关注我们获得“最新、最全、最优质”开源项目和工作学习方法
Vue Admin Better 是一款基于 Vue.js 的高质量后台管理系统模板,支持 Vue2.x 和 Vue3.x 版本,分别对应 Element UI 和 Element Plus 组件库。它拥有丰富的功能、灵活的配置和友好的用户界面,能够满足各种后台管理系统的需求。
🌟 项目特性
- 💪 40+ 高质量单页: 项目包含 40 多个高质量的单页,覆盖了后台管理系统的常用功能,如用户管理、角色管理、菜单管理、系统设置等。
- 💅 RBAC 模型 + JWT 权限控制: 项目采用 RBAC 模型和 JWT 权限控制,能够实现精细化的权限管理,保证系统的安全性。
- 🌍 10 万+ 项目实际应用: Vue Admin Better 已被广泛应用于 10 万多个项目中,经过了大量的实际应用验证,稳定可靠。
- 👏 良好的类型定义: 项目使用 TypeScript 进行开发,具有良好的类型定义,能够提高代码的可读性和可维护性。
- 🥳 开源版本支持免费商用: Vue Admin Better 的开源版本支持免费商用,能够帮助开发者节省开发成本。
- 🚀 跨平台 PC、手机端、平板: 项目支持跨平台,能够在 PC、手机端和平板等设备上运行,满足不同场景的需求。
- 📦️ 后端路由动态渲染: 项目支持后端路由动态渲染,能够根据用户的权限动态渲染菜单和路由,提高系统的灵活性。
🌐 仓库地址
🌐 vue2.x github 仓库地址
https://github.com/zxwk1998/vue-admin-better/
🌐 vue3.x github 仓库地址
https://github.com/zxwk1998/vue-admin-arco/
🌐 vue2.x 码云仓库地址
https://gitee.com/chu1204505056/vue-admin-better/
🌐 vue3.x 码云仓库地址
https://gitee.com/chu1204505056/vue-admin-arco/
📦️ 桌面应用程序
- Admin Pro: gitee.com/chu12045050…
- Admin Plus: gitee.com/chu12045050…
🌱 vue3.x arco-design
点击切换仓库: github.com/zxwk1998/vu…
# 克隆项目
git clone https://github.com/zxwk1998/vue-admin-arco.git
# 安装依赖
npm i --registry=http://mirrors.cloud.tencent.com/npm/
# 本地开发 启动项目
npm run dev
🌱 vue2.x master 分支(element-ui)
点击切换分支: github.com/zxwk1998/vu…
# 克隆项目
git clone -b master https://github.com/zxwk1998/vue-admin-better.git
# 安装依赖
npm i --registry=http://mirrors.cloud.tencent.com/npm/
# 本地开发 启动项目
npm run serve
🔊 友情链接
- OPSLI 基于 vue-admin-better 开源版的最佳实践: github.com/hiparker/op…
- uView uni-app 生态最优秀的 UI 框架: github.com/YanxinNet/u…
- form-generator Element 表单设计代码生成器: github.com/JakHuang/fo…
- wangEditor 国产最强开源富文本编辑: github.com/wangeditor-…
👷 框架杰出贡献者
- fwfmiao
- buuing
- hipi
- hdtopku
- shaonialife
- 1511578084
- Arooba-git
📌 优势及注意事项
对比其他开源 admin 框架有如下优势:
1. 支持前端控制路由权限 intelligence、后端控制路由权限 all 模式
2. 已知开源 vue admin 框架中首家支持 mock 自动生成自动导出功能
3. 提供 50 余项全局精细化配置
4. 支持 scss 自动排序,eslint 自动修复
5. axios 精细化封装,支持多数据源、多成功 code 数组,支持 application/json;charset=UTF-8、application/x-www-form-urlencoded;charset=UTF-8 多种传参方式
6. 支持登录 RSA 加密
7. 支持打包自动生成 7Z 压缩包
8. 支持 errorlog 错误拦截
9. 支持多主题、多布局切换
使用注意事项:
1. 项目默认使用 lf 换行符而非 crlf 换行符,新建文件时请注意选择文件换行符
2. 项目默认使用的最严格的 eslint 校验规范(plugin:vue/recommended),使用之前建议配置开发工具实现自动修复(建议使用 vscode 开发)
3. 项目使用的是要求最宽泛的 MIT 开源协议,保留 MIT 开源协议即可免费商用
💚 适合人群
- 正在以及想使用 element-ui/element-plus 开发,前端开发经验 1 年+。
- 熟悉 Vue.js 技术栈,使用它开发过几个实际项目。
- 对原理技术感兴趣,想进阶和提升的同学。
效果图展示
以下是 vue-admin-better 的一些效果图展示,包括 pro 版和 shop 版的界面设计。
Pro 版效果图
Shop 版效果图
应用场景
vue-admin-better 可用于各种后台管理系统的开发,例如:
- 企业内部管理系统: 如 OA 系统、CRM 系统、ERP 系统、财务系统等。
- 电商平台: 如电商平台后台管理系统、订单管理系统、商品管理系统等。
- 其他后台管理系统: 如内容管理系统、会员管理系统、数据统计系统等。
同类项目介绍
除了 vue-admin-better,还有其他一些优秀的后台管理框架,例如:
- vue-element-admin: 基于 Vue.js 和 Element UI 的后台管理框架。
- ant-design-pro: 基于 Ant Design 的后台管理框架。
- d2-admin: 基于 Vue.js 和 Element UI 的后台管理框架。
- adminLTE: 基于 Bootstrap 的后台管理框架。
这些框架各有优缺点,选择哪个框架取决于你的具体需求和喜好。
项目地址
https://github.com/zxwk1998/vue-admin-better