拥抱开源,Vue Admin Box后台管理系统免费开源啦

794 阅读5分钟

前言

各位前端小伙伴们,大家好,我是vue-admin-box中后台管理系统的主要开发者和维护者,从2021年6月份开始,就在开发这套后台管理系统,于2021年8月正式对外开源,旨在帮助更多的前端小伙伴进行vue3项目的学习,和给更多的中小型公司节省成本,当然也有简历优化的想法。至今为止,我已持续维护一年左右,现在特地分享给大家,希望大家的中后台开发体验更加完美,效率更高,薪资更高。

目前vue-admin-box有五个版本,其中一个demo版本,模拟大部分真实开发体验,和4个基础模板:

  1. demo版本技术架构: vue3 + typescript + vite + vuex + vue-router + element-plus + vue-i18n【在线预览
  2. ts基础模板:ts版本的基础模板,无国际化【在线预览
  3. ts-i18n基础模板:ts版本的基础模板,含国际化功能【在线预览
  4. js基础模板:js版本的基础模板,无国际化【在线预览
  5. js-i18n基础模板:js版本的基础模板,含国际化功能【在线预览

项目地址

github: https://github.com/cmdparkour/vue-admin-box
码云:https://gitee.com/cmdparkour/vue-admin-box
基础模板:http://www.github.com/cmdparkour/vue-admin-box-template

大家可以根据自己的情况选择对应的版本,推荐使用基础模板作为实际开发使用,辅以demo模板进行技术研究,可以平滑地进入vue3的世界。

功能简介

  1. 预设样式--样式美观大方,无缝对接element-plus,随意组合页面,随心所欲
  2. 主题配置--实时主题配置,并辅以主题开发文档,半天搞定一个主题不是问题
  3. 弹窗组件随意拖拽--封装后的弹窗组件支持随意拖拽
  4. 丰富的三方库示例--各类后台常见业务使用库集成与实践
  5. 完美的架构体系--沉淀了五个前端经验的架构,胜任大型项目不在话下,100+页面轻松搞定
  6. 表格弹窗封装--内置表格与弹窗快开模板,熟练运用后,针对这类表格弹窗业务可以一天搞20个页面,能写的逻辑都写全了
  7. 权限管理--完善的前后端权限管理方案,并辅助以文案,动态路由 ...

页面预览

首页

整个系统的导向,很清晰,简洁

Snipaste_2022-05-19_09-19-34.jpg

主题配置

完美内置四种主题风格:优雅、纯净、黑夜、中国风

Snipaste_2022-05-19_10-20-24.jpg

文档支持

秉承我用不好,大家都用不好的想法,把文档也集成了进来,增加了在项目中使用的时间,更站在了开发者第一人称来使用这个项目。 文档涉及到路由管理、keep-alive使用、菜单模块、表格弹窗的使用等等核心逻辑点。

Snipaste_2022-05-19_10-20-35.jpg

三方插件的集成

集成了足够多你可能会在开发阶段会使用的插件,并提供了三方插件库集成demo来展示应用领域。

Snipaste_2022-05-19_10-21-03.jpg

图片裁剪

中大型后台十分常见的一个前端技术领域,vue-admin-box也对它进行了集成,并处理了文件上传的绝大部分逻辑,你就需要联调接品就能用那种。

Snipaste_2022-05-19_10-21-13.jpg

右键菜单

即使是右键菜单这种冷门需求,咱也进行了集成,你说,这种项目你在平时使用中能遇到多少问题。

Snipaste_2022-05-19_10-21-25.jpg

表格弹窗模块

这是最常见、最普通的中后台领域,占了普通中后台开发的90%,于是咱们把能处理掉的逻辑都在模板内给你处理了,并提供完备的模板给你使用,快开的哲学就来源于此,有模板,一天20个页面,我都觉得少了。

Snipaste_2022-05-19_10-21-35.jpg

完美自适合的卡片列表

研究透这个页面的自适应布局哲学,那么你的中后台页面的自适应问题,完全不用担心了。

Snipaste_2022-05-19_10-21-43.jpg

外链支持

我也提供了一个demo展示如何引用一个外部链接,在系统内呈现,便于与三方页面进行集成。

Snipaste_2022-05-19_10-21-55.jpg

多级菜单的支持

当然,多级菜单的支持是一个中后台必不可少的功能,咱也得备上。

Snipaste_2022-05-19_10-22-06.jpg

分类表格

这一类左右联动的表格,咱也搞定了,并处理了95%的技术,使用此模板用此类业务,可以避免掉99%的BUG,爽不爽用了就知道了。当然了,除了分类,树联动表格也必不可少,你说是吧,详细请查看在线预览的页面模块。

Snipaste_2022-05-19_10-22-14.jpg

丰富的自定义指令

手写各类常见的自定义指令,如果你对前端领域自定义指令的原理还不精通,那还不赶紧来看看源码,学习一波,全部手写的自定义指令,让你从此不再对如何写自定义指令而发愁。

Snipaste_2022-05-19_10-22-32.jpg

echarts图表的集成

咱能做的,当然不仅仅是echarts图表,其他三方图表也随手拈来,参照源码,你可以完成更多事情。

Snipaste_2022-05-19_10-22-41.jpg

你以为这就完了吗,不,这只是框架的冰山一角,更多能让你快速开发的东西尽在其中,这么好的项目,你确定不点个star:github.com/cmdparkour/…