百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程字典 > 正文

Vue后台管理系统模板推荐

toyiye 2024-04-05 10:51 33 浏览 0 评论

原文链接: 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 (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

预览效果:

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-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

预览效果:

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-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/

预览效果:

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

预览效果:

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/

预览效果:

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-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、平板、手机)

预览效果:

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

预览效果:

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-material-admin (2.0k)

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

  • 集成方案:https://github.com/tookit/vue-material-admin
  • 预览地址:http://vma.isocked.com/#/dashboard

预览效果:

相关推荐

为何越来越多的编程语言使用JSON(为什么编程)

JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...

何时在数据库中使用 JSON(数据库用json格式存储)

在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...

MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)

前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

JSON对象花样进阶(json格式对象)

一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...

深入理解 JSON 和 Form-data(json和formdata提交区别)

在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...

JSON 语法(json 语法 priority)

JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

JSON语法详解(json的语法规则)

JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...

MySQL JSON数据类型操作(mysql的json)

概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...

JSON的数据模式(json数据格式示例)

像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

前端学习——JSON格式详解(后端json格式)

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

什么是 JSON:详解 JSON 及其优势(什么叫json)

现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...

PostgreSQL JSON 类型:处理结构化数据

PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...

JavaScript:JSON、三种包装类(javascript 包)

JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...

Python数据分析 只要1分钟 教你玩转JSON 全程干货

Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

比较一下JSON与XML两种数据格式?(json和xml哪个好)

JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...

取消回复欢迎 发表评论:

请填写验证码