分享几个优秀开源免费管理后台模版,建议收藏!

news/2024/7/10 20:51:52 标签: 开源

大家好,我是 jonssonyan

今天和大家分享一些免费开源的后台管理页面,帮助大家快速搭建前端页面。为什么要用模板?道理很简单,原因是方便我们快速开发。我们不应该花太多的时间在页面调整上,而应该把精力放在核心逻辑和业务上。

以我自己为例,说一下我自己在开发过程中的切身感受。我是一名后端程序员,同时也做一些前端开发的事情,所以我的后端开发速度肯定是比前端开发要快的。每次写新项目,第一后端开发比较熟练,第二代码可以复用,所以后端一般很快就能写完。但是前端就恰恰相反,第一前端开发没有后端熟练,第二页面尽量不要复用。为什么页面尽量不要复用?主要原因是防止用户审美疲劳,让认识你的用户感觉怎么你开发的系统都是一套 UI?所以这时候我们备用一些前端后台管理模板就非常重要,能多备几个就多备几个,在自己需要的时候,几分钟就可以把前端搭建完毕,立刻进入到业务开发界面,省时省力,何乐而不为?

另外有些人可能不太善用模板代码,有时候模板只是一个大致的框架,无论是前端模板还是后端模板,都不可能 100%符合我们的需求,需要我们按照自己的需求在上面更改。核心思路是将不需要的代码删掉,有时候系统不是越复杂越好,往往越简单,后期越容易维护。

善用模板的技巧就是,首先,找一个符合自己技术栈的模板,比如,你擅长的技术栈是 Vue3+TS+Vite,那你找的模板就不能是 Vue2+JS 的。其次,模板最好是开源并且持续更新,别等模板过了一段时间被商业化了,那自己就成了接盘侠,后期代码只能自己维护了,导致自己的页面有了 Bug 没有及时修复,损失的还是我们自己,最好是去 GitHub 上面找模板,而且提交记录最好是最近的时间(至少最近一年要有提交记录吧)。其次,模板生态要好,要满足绝大多数场景,组件足够的丰富。 比如我们在开发过程中最常用的表格组件、上传组件、登录组件、按钮、标签等等。最后,模板的兼容性要好。 对于常见的浏览器和常见的客户端要兼容。自适应要做好,方便电脑和手机上面用户体验良好。

所以接下来我给大家推荐一些常用的后台管理模板或者一些后台管理模板的搜索网站,主要以最常见的 Vue 和 React 模板为例希望对大家有所帮助。

builtatlightspeed

https://www.builtatlightspeed.com/

builtatlightspeed 是一个模板搜索网站,里面的模板绝大大多数都是免费的。最人性化的是可以按照技术栈搜索我们想要的模板。不仅仅是后台管理模板,这个模板网站还可以搜索比如企业官网、宣传页等网站模板。真的是一个宝藏网站,强烈推荐。

Ant Design Pro

GitHub:https://github.com/ant-design/ant-design-pro/

文档:https://pro.ant.design/zh-CN/

Ant Design 是我认为生态最好的 UI 框架了。兼容 React 和 Vue,企业级后台开发最常用的前端脚手架。 Ant Design Pro 则可以帮助我们快速搭建一个后台管理模板,只需要输入一行命令,等待一段时间就可以拥有一个完善的模板。我认为唯一的缺点就是功能太完善,我们改造时候删除的代码太多,大部分功能我们是用不到的,如果能出一个精简版就更好了。

npm i @ant-design/pro-cli -g // 安装Ant Design Pro脚手架
pro create myapp // 创建Ant Design Pro模板项目

Vben Admin

GitHub:https://github.com/vbenjs/vue-vben-admin/tree/thin

ps:GitHub 地址是精简版,完整版在 main 分支

Vben Admin 是一个类似 Ant Design Pro 的开箱即用的前端框架,UI 和色系和 Ant Design 是不一样的,生态也比较好,组件也比较丰富。适用于绝大多数开发场景。

Vue Admin Template

GitHub:https://github.com/PanJiaChen/vue-admin-template

GitHub:https://github.com/PanJiaChen/vue-element-admin

GitHub:https://github.com/Armour/vue-typescript-admin-template

这三个模板统一可以称为 Vue Template,算作是一个生态里面的东西。

技术栈如下:

  • vue-admin-template:Vue2+JS
  • vue-element-admin:Vue2+JS
  • vue-typescript-admin-template:Vue3+TS

ps: vue-admin-template 是 vue-element-admin 的精简版

根据自己的需要选择适合自己的模板,这三个模板页面的色系和组件样式是一样的。使用方法就是直接在 GitHub 上面 git clone 拉取到本地就可以了。

Mantis is React Dashboard Template

GitHub:https://github.com/codedthemes/mantis-free-react-admin-template

这是一个 React 模板,自适应做的很好,而且组件也比较丰富。UI 框架使用的是 MUI。

本期就和大家分享了一些我觉得还不多的后台管理模板资源,如果对你有帮助,可以点一个免费的赞,我是 jonssonyan,我们下期再见。


http://www.niftyadmin.cn/n/5068837.html

相关文章

C语言学习系列->联合体and枚举

文章目录 前言联合体概述联合体的特点联合体大小的计算优点练习 枚举概述优点使用 前言 在上一篇文章中,小编将结构体的学习笔记整理出来了。现在,小编将枚举和联合体笔记分享给大家。枚举和联合体与结构体一样,都是自定义类型,在…

安装matplotlib__pygame,以pycharm调入模块

安装pip 安装matplotlib 安装完毕,终端输入pip list检查 导入模块出现bug,发现不是matplotlib包的问题,pycharm版本貌似不兼容,用python编辑器可正常绘图,pygame也可正常导入。 ​​​​​​​ pycharm版本问题解决 终…

IEEE802系列协议知识点总结

IEEE 802 协议包含了以下多种子协议。把这些协议汇集在一起就叫IEEE 802 协议集。 (1)IEEE802.1 IEEE 802.1协议提供高层标准的框架,包括端到端协议、网络互连、网络管理、路由选择、桥接和性能测量。 •IEEE 802.1d:生成树协议(Spanning Tree Protocol&#xff0c…

计算机网络笔记3 数据链路层

计算机网络系列笔记目录👇 计算机网络笔记6 应用层计算机网络笔记5 运输层计算机网络笔记4 网络层计算机网络笔记3 数据链路层计算机网络笔记2 物理层计算机网络笔记1 概述 文章前言 💗 站在巨人的肩膀上,让知识的获得更加容易&#xff01…

C++11各种锁的具体使用

1.什么是互斥量(锁)? 互斥量在实际开发中很常用,需要学习了解! 这样比喻:单位上有一台打印机(共享数据a),你要用打印机(线程1要操作数据a)&#…

PHP框架面试题

目录 1、什么是PHP框架? 2、常见的PHP框架有哪些? 3、为什么要使用PHP框架? 4、什么是路由?PHP框架中的路由是如何实现的? 5.TP的特性有哪些? 6.laravel有那些特点? 7.TP框架和Laravel框架的区别 8.tp5和tp6区…

隐式意图和Activity启动模式:实现文件打开应用【Android、隐式意图】

隐式意图和Activity启动模式:实现文件打开应用 在Android开发中,隐式意图和Activity启动模式是两个重要的概念。它们可以用于实现不同应用之间的协作和交互。在本篇博客中,我们将探讨如何创建一个Android应用,该应用可以从外部应…

『力扣每日一题13』:给定一个整数sum,从有N个有序元素的数组中寻找元素a,b,使得a+b的结果最接近sum,最接近sum,最快的平均时间复杂度是?

一、题目 给定一个整数 sum ,从有 N 个有序元素的数组中寻找元素 a,b ,使得 ab 的结果最接近 sum ,最接近 sum ,最快的平均时间复杂度是? 二、思路解析 我们定义两个指针,一个指向数组的头部,一个指向数组的尾部。 然后再通过计算两个指针所…