Vue Admin Better:GitHub上最好看的后台管理模版,为你打造高效便捷的后台管理系统

1,455 阅读4分钟

嗨,大家好,我是小华同学,关注我们获得“最新、最全、最优质”开源项目工作学习方法

image.png

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/

📦️ 桌面应用程序

🌱 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

🔊 友情链接

👷 框架杰出贡献者

  • 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 版效果图

Image 1Image 2

Shop 版效果图

Image 3Image 4

应用场景

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