Vue后台管理系统模板推荐

42,974 阅读7分钟

原文链接: Vue后台管理系统模板推荐

更新记录

2022-08-31

  1. 更新 stars 数量,按照 stars 排序。

2021-06-18

  1. 新增几款后台管理系统模板。
  2. 注意一点的是,在原基础上直接加在后面(未按starts数排序)。

2021-03-06

  1. 推荐一些 Vue 常用后台管理系统模板。

前言

Vue.js 是一个目前比较流行的前端框架,已经到了前端人人都会的地步,今天这里为大家罗列一下基于 Vue 的后端管理的框架。目前比较流行和 Vue 搭配的 UI组件 有Element-UIiviewBootstrap-VueAnt-Design-Vue,另外还有VuetifyBuefy (Bulma css)、Vue Material 等等。基于这些组件库封装的后台管理模板,推荐一些常用 VUE后台模板 给大家。按照 Github 星标数量来依次介绍。

vue-element-admin (78.2k)

Vue-Element-Admin(github上的标星数为68.6k 78.2k)是一个后台前端解决方案,它基于 VueElement-UI 实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。

预览效果: 在这里插入图片描述在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

AdminLTE (41.4k)

AdminLTE(github上的标星数为38.8k 41.4k) 是一个完全响应的管理模板。基于 Bootstrap 4.6 框架和 JS/jQuery 插件。高度可定制且易于使用。适合从小型移动设备到大型台式机的多种屏幕分辨率。

预览效果: 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

iview-admin (16.2k)

iview-admin(github上的标星数为15.4k 16.2k)是iView生态中的成员之一,是一套采用前后端分离开发模式,基于 Vue 的后台管理系统前端解决方案。iView-admin2.0 脱离 1.x 版本进行重构,换用 Webpack4.0 + Vue-Cli3.0 作为基本开发环境。内置了开发后台管理系统常用的逻辑功能,和开箱即用的业务组件,旨在让开发者能够以最小的成本开发后台管理系统,降低开发量。

预览效果: 在这里插入图片描述在这里插入图片描述

vue-antd-admin(3.1k)/ant-design-vue-pro(32.8k)

Vue-Antd-Admin(github上的标星数为1.8k 3.1k)以 Markdown 为中心的项目结构, 以最少的配置帮助你专注于写作,享受 Vue + Webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可以使用 Vue 来开发自定义主,VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将作为 SPA 运行。

预览效果: 在这里插入图片描述 在这里插入图片描述 Ant-Design-Pro (github上的标星数为27.5k 32.8k)基于 Ant Design 体系精心设计,提炼自中后台应用的典型页面和场景,使用 React/dva/antd 等前端前沿技术开发,针对不同屏幕大小设计, 可配置的主题满足多样化的品牌诉求, 内建业界通用的国际化方案, 良好的工程实践助你持续产出高质量代码,实用的本地数据调试方案, 支持自动化测试保障前端产品质量。

预览效果: 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

vue-manage-system (15.6k)

Vue-Manage-System (github上的标星数为11.8k 15.6k)该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统(Web Management System)开发。基于 Vue.js ,使用 Vue-Cli3.0 脚手架,引用 Element UI 组件库,方便开发快速简洁好看的组件。分离颜色样式,支持手动切换主题色,而且很方便使用自定义主题色。

预览效果: 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

vue-admin-beautiful (12.8k)

Vue-Admin-Beautiful(github上的标星数为7.2k 12.8k)主线版本基于 element-plus、element-ui、ant-design-vue 三者并行开发维护,同时支持电脑,手机,平板。

特性:

  • 💪 40+高质量单页
  • 💅 RBAC 模型 + JWT 权限控制
  • 🌍 10 万+ 项目实际应用
  • 👏 良好的类型定义
  • 🥳 开源版本支持免费商用
  • 🚀 跨平台 PC、手机端、平板
  • 📦️ 后端路由动态渲染

预览效果: 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

vue2-manage (12.1k)

vue2-manage (github上的标星数为10.2k 12.1k)此项目是 Vue + Element-UI 构建的后台管理系统,是后台项目node-elm 的管理系统,所有的数据都是从服务器实时获取的真实数据,具有真实的注册、登陆、管理数据、权限验证等功能。

传送门: 前端项目地址后台系统地址原生APP项目地址

技术栈:vue2 + vuex + vue-router + webpack + ES6/7 + less + element-ui

预览效果: 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

d2-admin (11.7k)

D2-Admin (github上的标星数为9.8k 11.7k)是一个完全 开源免费 的企业中后台产品前端集成方案,使用最新的前端技术栈,小于 60kb 的本地首屏 js 加载,已经做好大部分项目前期准备工作,并且带有大量示例代码,助力管理系统快速开发。

预览效果: 在这里插入图片描述

Vuestic-Admin (8.8k)

Vuestic-Admin(github上的标星数为7.7k 8.8k)Free and beautiful Vue.js admin template with 44+ custom UI components, Developed by Epicmax, Designed by Vasili Savitski.

预览效果: 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

coreui-free-vue-admin-template (3.1k)

CoreUI-Free-Vue-Admin-Template (github上的标星数为2.7k 3.1k)是一款基于 coreui(coreui vue bootstrap)组件的后台管理模板。特点是高性能和易于定制的UI组件可满足任何需求,从而在一半的时间内开发出现代,美观,响应迅速的应用程序。

预览效果: 在这里插入图片描述

nx-admin (2.5k)

nx-admin (github上的标星数为2.3k 2.5k) 是一个开源的管理系统前端集成方案,它基于 VueElement。它使用了最新的前端技术栈,内置了i18国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。最大程度上帮助个人,企业节省时间成本和费用开支。

预览效果: 在这里插入图片描述 在这里插入图片描述

vue-material-admin (2.2k)

vue-material-admin (github上的标星数为2.1k 2.2k)。

预览效果: 在这里插入图片描述 在这里插入图片描述

Vue Black Dashboard

Vue Black Dashboard 是一个Bootstrap 4 Admin Dashboard,其中包含数十个组件,自定义元素,插件和示例代码,它们可以完美地满足我们的设计需求。

同时它也有暗模式和亮模式。 此可切换功能确实增加了额外的自定义层,可以使应用程序脱颖而出。

预览效果( 前三张为 Free ,后五张为 Pro ):

在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

Vue White Dashboard

Vue White Dashboard 是一个免费的 Bootstrap 4 管理模板。 有16个免费元素,3个自定义插件和7个示例页面,对于那些只想寻找一种免费方法来测试其仪表板的人来说,这是一个很好的起点。

主要特点:

  1. 免费
  2. Bootstrap4 管理模板
  3. 响应式设计
  4. 16个自定义元素

预览效果:

在这里插入图片描述 在这里插入图片描述 在这里插入图片描述