Soybean Admin - 基于 Vue3 / vite3 等最新前端技术栈构建的中后台模板,免费开源、清新优雅,主题丰富

news2024/11/20 3:29:16

Soybean Admin - 基于 Vue3 / vite3 等最新前端技术栈构建的中后台模板,免费开源、清新优雅,主题丰富

一款专业好看、完成度很高的 admin 开源项目,无论是用于生产还是学习,都非常值得尝试。

关于 Soybean Admin

Soybean Admin 是一个基于 Vue3 / Vite3 / TypeScript / NaiveUI / Pinia 和 UnoCSS 的中后台模版,它使用了最新流行的前端技术栈,内置丰富的主题配置,有着极高的代码规范,基于文件的路由系统以及基于 Mock 的动态权限路由,开箱即用的中后台前端解决方案,也可用于学习参考。

Soybean Admin 官网

Soybean Admin 的技术特性

  • 使用最新流行的前端技术栈:使用 Vue3 / Vite 等前端前沿技术开发, 使用高效率的 npm 包管理器 pnpm
  • 支持 TypeScript
  • 丰富可配置的主题、暗黑模式,基于原子 css 框架 – UnoCss 的动态主题颜色
  • 优良的代码规范:丰富的规范插件及极高要求的代码规范,学习价值也很大
  • 文件路由系统:基于文件的路由系统,根据页面文件自动生成路由声明、路由导入和路由模块
  • 权限路由:提供前端静态和后端动态两种路由模式,基于 mock 的动态路由能快速实现后端动态路由
  • 网络请求函数:基于 axios 的完善的请求函数封装,提供 Promise 和 hooks 两种请求函数,加入请求结果数据转换的适配器

Soybean Admin 登录页

Admin 中后台系统有什么作用呢?

后台管理系统,也就是常说的 Admin 系统,是用于管理和控制网站、APP 或软件系统后台操作的工具。admin 提供了一个用户界面,允许管理员或授权用户对系统进行管理、配置和监控。一个功能完善的后台管理系统一般都有下面这些功能:

总之,后台管理系统在网站、应用程序或系统的开发和运营过程中起着关键的作用,往往是一个互联网项目最初开始搭建的阶段。而今天给大家介绍的 Soybean Admin,就是一个可以让开发者快速搭建一个专业美观、开箱即用的 admin 前端框架,上面提到的功能几乎都能实现。

Soybean Admin 控制台

Soybean Admin 界面预览

Soybean Admin 开发上手

需要注意的是,本地环境运行 Soybean Admin 需要安装 pnpm 7.x+ 、Node.js 14.18+ 和 Git,然后从 GitHub 获取代码:

安装项目依赖

安装全局依赖

bash

初始化 husky

然后执行 npm script 中的 dev,就能在本地运行 Soybean Admin,官网也给出了较为详细的文档说明。

清新优雅的主题,包括暗黑模式

Soybean Admin 默认的主题非常好看,配色优雅,还能自动切换暗黑模式,更是支持配置多标签、更改布局模式、切换动画等,功能完善得甚至比很多付费的 admin 系统还要好。

Soybean Admin 配置

免费开源和商用说明

Soybean Admin 是一个完全免费开源的 admin 项目,源码基于 MIT 开源协议托管在 Github 上,任何人都可以免费下载代码来使用,也可以用于商业用途。

原文链接:https://www.thosefree.com/soybean-admin

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/694152.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

poium测试库介绍

poium测试库前身为selenium-page-objects测试库,我在以前的文章中也有介绍过:这可能是最简单的Page Object库,项目的核心是基于Page Objects实现元素定位的封装。该项目由我个人在维护,目前在公司项目中已经得到的应用。 ### poium的优势 Pa…

cmd和android studio同时使用adb,解决冲突的方案

问题: android studio 在Terminal使用adb后,cmd的adb就会掉线;同样cmd的adb使用中,android studio的logcat 的设备就是Offline状态,得重新在Terminal adb connect,并且关闭掉cmd窗口,否则adb反…

Centos ifconfig不显示IP地址解决办法之一

虚拟机使用命令ifconfig不显示IP地址,情况如下 原因:我们的虚拟机网络服务没有设置为开机自启动 解决: 1,进入目录 /etc/sysconfig/network-scripts/ cd /etc/sysconfig/network-scripts/ 2,路径下有一个 ifcfg-en…

4.蜂鸣器

1.了解蜂鸣器: 蜂鸣器在使用3.3V无法驱动,需要借助到三极管的放大特性(IcβIb)将蜂鸣器驱动;本次原理图中,接R33电阻是因为当STM32单片机复位时处于浮空状态,防止小电流让蜂鸣器响而添加的。 2.蜂鸣器原理图&#xf…

十一、jenkins将构建时间作为Jenkins变量(BUILD_TIMESTAMP)

插件管理中安装Build Timestamp 插件后可以使用 构建时间变量,变量名称【BUILD_TIMESTAMP】 引用变量方法: linux : ${BUILD_TIMESTAMP} 或 $BUILD_TIMESTAMP 推荐使用 ${BUILD_TIMESTAMP} Windows: %BUILD_TIMESTAMP%

TypeScript——泛型

泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。 函数泛型 本来函数参数类型的不同时,要写多个,现在用泛型,只需要使用时传参即可…

android studio 一直卡在Build android:Download maven-metadata.xml

在android studio进行此操作,关闭gradle的联网功能

使用MM32L0130和HYS1254的电子秤方案验证

使用MM32L0130和HYS1254的电子秤方案验证 文章目录 使用MM32L0130和HYS1254的电子秤方案验证引言电路设计软件设计采集HYS1254数据软件滤波算法换算压力为ADC采样值 实验过程数据可视化优化电路使用软件滤波降低ADC的采样速率使用独立的供电电源再次调整滤波算法 验证总结参考文…

M1 macbook上安装docker 编译内核 并使用qemu启动内核。

1、在M1上安装docker这个就不用提供步骤了,网上自行搜索。 2、在M1上pull一个ubuntu的容器。docker pull ubuntu:18.04 docker images REPOSITORY TAG IMAGE ID CREATED SIZE ubuntu 18.04 d1a528908992 …

python实现Edge的爬虫

python实现Edge的爬虫 查看Edge的版本号 下载对应的驱动 官网驱动链接: link 根据自己的系统选择相应的驱动 解压后放在自己的python的Scripts路径,并改名为 MicrosoftWebDriver 安装python库 常用的爬虫库: from bs4 import BeautifulSoup import …

回归预测 | MATLAB实现基于QPSO-GRU、PSO-GRU、GRU多变量回归预测

回归预测 | MATLAB实现基于QPSO-GRU、PSO-GRU、GRU多变量回归预测 目录 回归预测 | MATLAB实现基于QPSO-GRU、PSO-GRU、GRU多变量回归预测效果一览基本描述程序设计参考资料 效果一览 基本描述 1.Matlab实现QPSO-GRU、PSO-GRU和GRU门控循环单元多变量回归预测; 2.输…

Word中页码变成 {PAGE \* MERGEFORMAT}

今天在写材料的时候Word突然就完蛋了,页码什么的出现乱码了,然后就搜索了一下,找到了解决办法,这里记录一下,方便以后查阅。 Word中页码变成 {PAGE \* MERGEFORMAT}

AndroidTV开发14优雅地实现TV端超长巨图加载

AndroidTV开发14优雅地实现TV端超长巨图加载 1.前言 之前在Android和Vue端都实现过长图加载,虽然实现需求,但是有很多问题没有解决,效果也不尽人意今天就各种问题来分析一下: 图片加载时清晰度不是很好,会失真的情况…

vscode编辑器如何显示.git隐藏文件, vscode不显示git文件怎么办

问题描述 我想要设置pre-commit hook ,但是我在vscode项目里创建的时候,发现此文件已存在,想看隐藏文件夹 .git,但是我看不到它,想看隐藏文件夹 .git,此时该怎么办呢? 1. 文件-首选项-设置 2. 搜索 files , 然后去掉…

Canny边缘检测

Canny边缘检测 步骤: 使用高斯滤波器,以平滑图像,滤波噪声计算图像中每个像素点的梯度强度和方向应用非极大值抑制(Non-Maximum Suppression),以消除边缘检测带来的杂散响应应用双阈值(Double…

Zadig v1.16.0升级到v1.17.0

文章目录 数据备份MongoDB备份MySQL备份 升级 参考官网链接: https://docs.koderover.com/zadig/Zadig%20v1.17.0/release-notes/v1.17.0/#%E5%8A%9F%E8%83%BD%E5%88%97%E8%A1%A8 数据备份 MongoDB备份 rootzz808:~# kubectl get svc -n zadig |grep mongo kr-mon…

STM32单片机(六)TIM定时器 -> 第四节:TIM输出比较练习3(PWM驱动直流电机)

❤️ 专栏简介:本专栏记录了从零学习单片机的过程,其中包括51单片机和STM32单片机两部分;建议先学习51单片机,其是STM32等高级单片机的基础;这样再学习STM32时才能融会贯通。 ☀️ 专栏适用人群 :适用于想要…

防近视台灯有效果吗?专家公认的防近视台灯

答案是有的。主要是因为这种护眼台灯的光线都比较柔和,它主要是由发光源和灯具两部分组成。发光源呢主要是以LED灯作为光源,光线比较稳定均匀一点。而灯具的设计可以改善光线的分布,柔化光线,提高均匀度和光照面积等等&#xff0c…

重金属冶炼VR仿真实训教学提高了实验效率

有色金属冶炼VR虚拟实操软件是一种新型的教育工具,它通过VR虚拟现实技术,将学生带入到真实的有色金属冶炼过程中,让学生在模拟环境中进行实践操作,从而提高学生的实践能力和理论知识水平。相比传统的教学方式,有色金属…

vue属性中的数据绑定v-text与响应式操作v-html+vue中鼠标悬停显示效果+布尔值在vue中引用属性中的操作

1&#xff0c;vue属性中的数据绑定v-text与响应式操作v-html 当我们导入vue框架后&#xff0c;对于数据的绑定功能&#xff0c;我们使用v-text的语法功能&#xff1a; <div v-text "message"><div>在该情况下&#xff0c;我们可以输出对应属性的文本&a…