乐趣区

关于前端:Vue后台管理系统模板推荐

jiezi

前言

文章链接: https://tzy1997.com/articles/…

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 我的项目地址
{% tip %} 技术栈：vue2 + vuex + vue-router + webpack + ES6/7 + less + element-ui{% endtip %}

  • 集成计划：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

预览成果：


退出移动版