当前位置: 首页>后端>正文

Vue后台管理系统模板推荐

前言

文章链接:?https://tzy1997.com/articles/xi2mpxmd

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

vue-element-admin?(63.3k)

Vue-Element-Admin(github上的标星数为63.3k)是一个后台前端解决方案,它基于?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

预览效果:

Vue后台管理系统模板推荐,第1张
Vue后台管理系统模板推荐,第2张
Vue后台管理系统模板推荐,第3张
Vue后台管理系统模板推荐,第4张
Vue后台管理系统模板推荐,第5张
Vue后台管理系统模板推荐,第6张

iview-admin?(15.4k)

iview-admin(github上的标星数为15.4k)是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后台管理系统模板推荐,第7张
Vue后台管理系统模板推荐,第8张

vue-antd-admin(1.8k)/ant-design-vue-pro(27.5k)

Vue-Antd-Admin(github上的标星数为1.8k)以 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

预览效果:

Vue后台管理系统模板推荐,第9张
Vue后台管理系统模板推荐,第10张

Ant-Design-Pro?(github上的标星数为27.5k)基于?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后台管理系统模板推荐,第11张
Vue后台管理系统模板推荐,第12张
Vue后台管理系统模板推荐,第13张

vue-manage-system (11.8k)

Vue-Manage-System?(github上的标星数为11.8k)该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统(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后台管理系统模板推荐,第14张
Vue后台管理系统模板推荐,第15张
Vue后台管理系统模板推荐,第16张

vue2-manage (10.2k)

vue2-manage?(github上的标星数为10.2k)此项目是?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

预览效果:

Vue后台管理系统模板推荐,第17张
Vue后台管理系统模板推荐,第18张
Vue后台管理系统模板推荐,第19张

d2-admin (9.8k)

D2-Admin?(github上的标星数为9.8k)是一个完全 开源免费 的企业中后台产品前端集成方案,使用最新的前端技术栈,小于 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/

预览效果:

Vue后台管理系统模板推荐,第20张

Vuestic-Admin (7.7k)

Vuestic-Admin?(github上的标星数为7.7k)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

预览效果:

Vue后台管理系统模板推荐,第21张
Vue后台管理系统模板推荐,第22张
Vue后台管理系统模板推荐,第23张
Vue后台管理系统模板推荐,第24张
Vue后台管理系统模板推荐,第25张
Vue后台管理系统模板推荐,第26张

vue-admin-beautiful (7.2k)

Vue-Admin-Beautiful?(github上的标星数为7.2k)主线版本基于 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、平板、手机)

预览效果:

Vue后台管理系统模板推荐,第27张
Vue后台管理系统模板推荐,第28张
Vue后台管理系统模板推荐,第29张
Vue后台管理系统模板推荐,第30张
Vue后台管理系统模板推荐,第31张

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

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

集成方案:https://github.com/coreui/coreui-free-vue-admin-template

预览地址:https://coreui.io/vue/demo/3.2.2/#/dashboard

预览效果:

Vue后台管理系统模板推荐,第32张

nx-admin (2.3k)

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

文档地址:https://mgbq.github.io/nx-admin-site/zh/

集成方案:https://github.com/mgbq/nx-admin

国内镜像:https://gitee.com/symgg/nx-admin

预览地址:https://mgbq.github.io/vue-permission/#/login

预览效果:

Vue后台管理系统模板推荐,第33张
Vue后台管理系统模板推荐,第34张

vue-material-admin (2.0k)

vue-material-admin?(github上的标星数为2.0k)。

集成方案:https://github.com/tookit/vue-material-admin

预览地址:http://vma.isocked.com/#/dashboard

预览效果:

Vue后台管理系统模板推荐,第35张
Vue后台管理系统模板推荐,第36张

https://www.xamrdz.com/backend/3er1997487.html

相关文章: