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

news/2024/7/5 3:01:38

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://lihuaxi.xjx100.cn/news/1284956.html

相关文章

TypeScript——类型别名(type)

类型别名 type 关键字,用来给一个类型起个新名字 定义类型别名 type str stringlet s: str 我是张三console.log(s)定义联合类型别名 type item string | numberlet arr: item[] [1, zs]console.log(arr)interface与类型别名 两者可以被继承 interface 继…

模板匹配

模板匹配 模板匹配和卷积原理很像,模板在原图像上从原点开始滑动,计算模板与图像窗口的差异程度,然后将每次计算的结果放入一个矩阵,最后作为结果输出。假设原图像大小为A * B,模板大小为a * b,则输出结果…

Docker 配置 vins-mono

前提条件&#xff1a;物理机上安装好ROS和Docker&#xff0c;参考 http://wiki.ros.org/ROS/Installation Ubuntu Docker 安装 | 菜鸟教程 Docker 换源 sudo mkdir -p /etc/docker sudo tee /etc/docker/daemon.json <<-EOF {"registry-mirrors": ["镜像…

Rancher集群搭建

前言 随着容器的普及和Kubernetes 的日渐成熟&#xff0c;企业内部运行多个Kubernetes 集群已变得颇为常见&#xff0c;然而部署kubernetes集群的方式也多样化&#xff0c;二进制部署、rancher、kubeadm、minikube等。然而本篇文章主要讲解的是如何使用rancher快速部署一个k8s集…

解释索引、事务、SQL优化等相关概念,并能够应用它们来解决实际问题

当涉及数据库和SQL的面试时&#xff0c;了解和应用以下概念可以提升你作为后台开发工程师的竞争力&#xff1a; 1. 索引&#xff1a; - 索引是一种数据结构&#xff0c;用于加速数据库的查询操作。 - 索引可以根据某个列或一组列的值进行排序&#xff0c;并提供快速访问…

一文学会Python安装和基础语法-全程干货

安装Python程序 官网Python下载地址&#xff1a;Python Releases for Windows | Python.org 安装3.7版本即可&#xff0c;版本升级可能会有较小的改动&#xff0c;下面要学习的都以python3.7为例 下载安装包之后直接双击无脑安装即可 新手经常遇到的问题&#xff1a; 1.符号…

win如何使用OpenSSL生成自签名证书,使 http 升级为 https

win如何使用OpenSSL生成自签名证书&#xff0c;使 http 升级为 https 前言 HTTPS其实就是HTTP over SSL&#xff0c;也就是让HTTP连接建立在SSL安全连接之上。 创建自签名证书需要安装openssl。参考本文安装OpenSSL部分。 使用OpenSSL生成自签名证书的步骤&#xff1a;参考…

Rtree实现对带半径的点聚类

业务上碰到了需要对圆做聚类的场景 sklearn现在的聚类方法dbscan(支持自定义距离公式&#xff0c;但是性能影响巨大 kdtree(不支持自定义距离计算 google、百度无果 思考用rtree实现 参考: https://zhuanlan.zhihu.com/p/62639268 计算过程 # 数据构建 num_points 200000 c…