Vue后台管理系统模板推荐

唐志远

发布于 2022-10-27 18:56:25

6K1

发布于 2022-10-27 18:56:25

文章被收录于专栏：FE32 Code

更新记录

2022-08-31

更新 stars 数量，按照 stars 排序。

2021-06-18

新增几款后台管理系统模板。
注意一点的是，在原基础上直接加在后面（未按starts数排序）。

2021-03-06

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

前言

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

vue-element-admin (78.2k)

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

文档地址：Document Address
集成方案：vue-element-admin
基础模板：vue-admin-template
桌面终端：electron-vue-admin
Typescript版：vue-typescript-admin-template （鸣谢: @Armour）
Others： awesome-project
在线预览地址：https://panjiachen.github.io/vue-element-admin
国内用户可访问该地址：https://panjiachen.gitee.io/vue-element-admin

预览效果：

AdminLTE (41.4k)

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

Github仓库地址： https://github.com/ColorlibHQ/AdminLTE
文档地址：https://adminlte.io/docs/3.1/
在线预览地址：https://adminlte.io/themes/v3/index3.html
国内用户可访问该地址在线预览：http://adminlte.la998.com/v3/index.html

预览效果：

iview-admin (16.2k)

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

文档地址：https://lison16.github.io/iview-admin-doc
集成方案：https://github.com/iview/iview-admin
预览地址：https://admin.iviewui.com

预览效果：

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 运行。

文档地址：https://iczer.gitee.io/vue-antd-admin-docs/start/use.html
集成方案：https://github.com/iczer/vue-antd-admin
国内镜像：https://gitee.com/iczer/vue-antd-admin
预览地址：https://iczer.gitee.io/vue-antd-admin
常见问题：https://iczer.gitee.io/vue-antd-admin-docs/start/faq.html

预览效果：

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

文档地址：https://pro.ant.design/docs/getting-started-cn
集成方案：https://github.com/ant-design/ant-design-pro
预览地址：http://preview.pro.ant.design
常见问题：http://pro.ant.design/docs/faq-cn

预览效果：

vue-manage-system (15.6k)

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

集成方案：https://github.com/lin-xin/vue-manage-system
预览地址：https://lin-xin.gitee.io/example/work/

预览效果：

vue-admin-beautiful (12.8k)

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

Github仓库地址： https://github.com/chuzhixin/vue-admin-beautiful
Gitee仓库地址： https://gitee.com/chu1204505056/vue-admin-beautiful
vue2.x + element-ui：vue2.x + element-ui（免费商用，支持 PC、平板、手机）
vue3.x + element-plus：vue3.x + element-plus（alpha 版本，免费商用，支持 PC、平板、手机）
vue3.x + ant-design-vue：vue3.x + ant-design-vue（beta 版本，免费商用，支持 PC、平板、手机）
pro 版演示地址：pro 版演示地址（付费版本，支持 PC、平板、手机）

特性：

💪 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

集成方案：https://github.com/bailicangdu/vue2-manage
预览地址：https://cangdu.org/manage/#/manage

预览效果：

d2-admin (11.7k)

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

文档地址：https://d2.pub/zh/doc/d2-admin/
集成方案：https://github.com/d2-projects/d2-admin
国内镜像：https://gitee.com/d2-projects/d2-admin
Coding：https://d2-projects.coding.net/p/d2-projects/d/d2-admin/git
预览地址：https://d2.pub/d2-admin/preview/

预览效果：

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.

文档地址：https://github.com/epicmaxco/vuestic-admin/wiki
集成方案：https://github.com/epicmaxco/vuestic-admin
预览地址：https://vuestic.epicmax.co/admin/dashboard

预览效果：

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

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

集成方案：https://github.com/coreui/coreui-free-vue-admin-template
预览地址：https://coreui.io/vue/demo/3.2.2/#/dashboard

预览效果：

nx-admin (2.5k)

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