Soybean Admin:基于 Vue3、Vite3、TypeScript、NaiveUI、Pinia 和 UnoCSS 的清新优雅的中后台模版

一、引言

随着互联网技术的快速发展,前端开发领域也在不断演进。Soybean Admin 作为一个基于最新前端技术栈的中后台模版,为开发者提供了一个高效、规范、灵活的解决方案。本文将深入探讨 Soybean Admin 的技术特性及其在中后台前端开发中的优势。

二、技术栈解析

Soybean Admin 采用了前沿的 Vue3、Vite3、TypeScript、NaiveUI、Pinia 和 UnoCSS 技术,这些技术的结合使得 Soybean Admin 在性能、可维护性和可扩展性方面具有显著优势。Vue3 和 Vite3 为开发者提供了高效的组件化和构建系统,而 TypeScript 则增强了代码的可维护性和类型安全性。NaiveUI 和 UnoCSS 为用户界面提供了丰富的组件和美观的样式。

特性

  • 最新流行技术栈:使用 Vue3/Vite 等前端前沿技术开发, 使用高效率的 npm 包管理器 pnpm

  • TypeScript: 应用程序级 JavaScript 的语言

  • 主题:丰富可配置的主题、暗黑模式,基于原子 css 框架 - UnoCss 的动态主题颜色

  • 代码规范:丰富的规范插件及极高的代码规范

  • 文件路由系统:基于文件的路由系统,根据页面文件自动生成路由声明、路由导入和路由模块

  • 权限路由:提供前端静态和后端动态两种路由模式,基于 mock 的动态路由能快速实现后端动态路由

  • 请求函数:基于 axios 的完善的请求函数封装,提供 Promise 和 hooks 两种请求函数,加入请求结果数据转换的适配器

SoybeanJS 工具库

  • @soybeanjs/cli: SoybeanJS 命令行工具,包含发布、git 和依赖等相关的实用命令

  • @soybeanjs/changelog: 根据 git tags 和 commits 生成 changelog 示例

  • eslint-config-soybeanjs: SoybeanJS 的 eslint 预设配置

  • @soybeanjs/materials: SoybeanJS 的物料仓库

  • @soybeanjs/vite-plugin-vue-page-route: SoybeanAdmin 的路由插件

基于 SoybeanAdmin 二次开发的项目

  • electron-mock-admin: 一个 Mock Api 管理系统,帮助前端开发伙伴快速实现接口的 mock。

  • T-Shell: 是一个可配置命令提示的终端模拟器和 SSH 客户端。

三、主题与样式

Soybean Admin 的主题配置是其一大亮点,它支持丰富的主题选项和暗黑模式,使界面风格更加多样化和个性化。同时,基于原子 css 框架 - UnoCss 的动态主题颜色可以根据用户的偏好进行动态调整,提高了用户体验。

部分截图:

图片

图片

图片

图片

四、代码规范与路由系统

Soybean Admin 遵循极高的代码规范,通过丰富的规范插件确保代码质量。它采用基于文件的路由系统,自动生成路由声明、路由导入和路由模块,提高了开发效率。这种路由系统也使得项目结构更加清晰,易于维护和扩展。

五、权限路由与后端交互

Soybean Admin 提供了完善的权限管理方案,包括前后端权限控制。基于 Mock 的动态权限路由能够快速实现后端动态路由,使得权限控制更加灵活和高效。此外,Soybean Admin 还基于 axios 提供了完善的请求函数封装,使得前后端数据交互更加便捷和可靠。

六、项目特性与实践经验

Soybean Admin 的项目特性不仅包括最新技术栈的运用,还体现在其完善的插件体系、丰富的主题配置以及前后端权限管理方案等方面。在实际开发中,开发者可以根据项目需求选择适合的技术和插件,灵活配置主题和权限,快速构建出优雅且高效的中后台前端应用。

安装使用

  • 环境配置 本地环境需要安装 pnpm 7.x 、Node.js 14.18+ 和 Git

  • 克隆代码

git clone https://github.com/honghuangdc/soybean-admin.git
  • 安装依赖

pnpm i
  • 运行

pnpm dev
  • 打包

pnpm build

七、结论

Soybean Admin 作为前端开发的新选择,凭借其前沿的技术栈、丰富的主题配置、高规范的代码结构以及完善的权限管理方案等特性,为开发者提供了一个高效、规范、灵活的中后台前端解决方案。无论是在小型项目中快速构建原型,还是在大型项目中实现复杂的业务需求,Soybean Admin 都将成为开发者的得力助手。随着前端技术的不断发展,我们期待 Soybean Admin 在未来的应用中发挥出更大的潜力,引领前端开发的新潮流。

框架下载地址:

从 GitHub 获取代码

# 克隆代码
git clone https://github.com/honghuangdc/soybean-admin.git

从 Gitee 获取代码

# 克隆代码
git clone https://gitee.com/honghuangdc/soybean-admin.git

后端服务

  • soybean-admin-java

在线预览

  • https://admin.soybeanjs.cn/login?redirect=/dashboard/analysis

官方文档

  • https://admin-docs.soybeanjs.cn/

欢迎关注我的微信技术公众号: 前端组件开发

d848d5658a07453c843277846948c608.png

欢迎加入“前端组件开发学习”交流群,一起学习成长!可关注  “前端组件开发” 公众号后,私信后申请入群。

图片

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

android h5理财(记账)管理系统eclipse开发mysql数据库编程服务端java计算机程序设计

一、源码特点 android h5理财管理系统是一套完善的WEBandroid设计系统,对理解JSP java,安卓app编程开发语言有帮助(系统采用web服务端APP端 综合模式进行设计开发),系统具有完整的源代码和数据库,系统主要…

从零开始的 dbt 入门教程 (dbt cloud 自动化篇)

一、引 在前面的几篇文章中,我们从 dbt core 聊到了 dbt 项目工程化,我相信前几篇文章足够各位数据开发师从零快速入门 dbt 开发,那么到现在我们更迫切需要解决的是如何让数据更新做到定时化,毕竟作为开发我们肯定没有经历每天定…

基于springboot实现在线拍卖系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现在线拍卖系统演示 摘要 随着社会的发展,社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统,主要的模块包括管理员;首页、个人中心、用户管理、商品类型管理、拍…

[热门]通义灵码做活动,送挺多礼品,快来薅羊毛!!!

你的编辑器装上智能ai编辑了吗,的确挺好用的。 最近阿里云AI编码搞活动,可以免费体验并且还可以抽盲盒。有日历、马克杯、代金券、等等其他数码产品。 大多数都是日历。 点击链接参与「通义灵码 体验 AI 编码,开 AI 盲盒」 https://develope…

PCI产业概述和产业发展动态分享

atsec白海蔚 2024年3月底 关键词:支付卡产业、PCI DSS、数据安全、支付交易 本文为atsec和作者技术共享类文章,旨在共同探讨信息安全的相关话题。转载请注明:atsec和作者名称。 *如有兴趣了解早期产业信息请参见作者于2021年4月发布信息&a…

液晶显示解决方案T-CON面板显示驱动PMIC芯片

随着数智时代的到来,高清电影、游戏、VR/AR、车载等对多屏、大尺寸、更清晰显示设备的需求越来越高;特别是在智能手机、平板电脑、电视、广告展示和显示器等消费电子产品领域;高效、稳定、多功能的电源管理芯片变得至关重要。 对于LCD TV显示…

Linux-安装redis

安装指令 sudo apt-get install redis-server 启动服务 sudo systemctl start redis 查找redis路径 find / -name "filename" linux redis修改密码 sudo nano /etc/redis/redis.conf 找到 "requirepass" 这一行,取消注释并设置新的密码&…

算法练习-常用查找算法复现

一个不知名大学生,江湖人称菜狗 original author: Jacky Li Email : 3435673055qq.com Time of completion:2024.03.24 Last edited: 2024.03.24 目录 算法练习-常用查找算法复现 第1关:顺序查找(算法7.1和7.2) 任务…

第二十章 TypeScript(webpack构建ts+vue3项目)

构建项目目录 src-- main.ts-- App.vue--shim.d.tswebpack.config.jsindex.htmlpackage.jsontsconfig.json 基础构建 npm install webpack -D npm install webpack-dev-server -D npm install webpack-cli -D package.json 添加打包命令和 启动服务的命令 {"scripts…

使用PySimpleGUI库打造一款轻量级计算器

目录 一、PySimpleGUI简介 二、安装PySimpleGUI 三、创建计算器界面 四、实现计算器的功能 五、总结 在Python的世界中,GUI(图形用户界面)库的选择多种多样,但如果你是一个新手,或者想要快速且简单地创建一个G…

谷粒商城——Redisson看门狗

可重入锁: 看门狗机制:(lock.lock()不设置过期时间就会自动触发 看门狗机制) 如果一个线程已经上锁后,在运行的过程中中断导致未释放锁从而导致其他线程无法进行,为此需要为每个锁设置自动过期时间。但是如果线程运行时间较长&am…

网线相关(T568A和T568B定义,交叉线连接方式,8芯网线1分2)

T568B 1 2 3 4 5 6 7 8 白橙 橙 白绿 蓝 白蓝 绿 白棕 棕 T568A 1 2 3 4 5 6 …

智慧园区整体解决方案

智慧园区整体解决方案-综合运营管理系统 1. 园区现状与发展机遇 2. 智慧园区愿景 3. 智慧解决方案架构 4. 智慧园区各子系统介绍 5. 智慧园区建设意义 楼宇管理,物业管理,消防管理,巡检管理,门禁管理,停车管理等综合实…

Linux命令dmesg详解和实例: 显示或控制内核环形缓冲区的内容,查看或操作内核消息

目录 一、命令介绍 二、 基本用法 1、语法结构 2、选项 3、支持的日志设施: 4、支持的日志级别(优先级): 四、基本用法 1. 查看内核消息: 2. 实时查看内核消息: 3. 清空内核消息: 五、 高级用法 1. 过滤消…

005、Dynamo与Revit API之间的转换

今天来聊聊 Dynamo 与 Revit 之间图元转换的基础知识,这些需要你牢牢记住哦,不然在 Python script 中写代码,经常会报错的~ 通常来讲,所有来自 Dynamo 节点的几何图形都不是 Revit 的几何对象,所以它们需要与 Revit AP…

网盘——数据库操作

关于网盘的数据库模块,主要有以下几个内容:定义数据库操作类、将数据库操作类定义成单例模式、数据库操作 数据库是在Qt里面,定义成操作类,专门用这个类产生对象,对数据库实现操作,那么我们在产生对象的时…

2016年认证杯SPSSPRO杯数学建模D题(第二阶段)NBA是否有必要设立四分线全过程文档及程序

2016年认证杯SPSSPRO杯数学建模 D题 NBA是否有必要设立四分线 原题再现: NBA 联盟从 1946 年成立到今天,一路上经历过无数次规则上的变迁。有顺应民意、皆大欢喜的,比如 1973 年在技术统计中增加了抢断和盖帽数据;有应运而生、力…

linux 通过nvm安装node.js

我的博客原文:linux 通过nvm安装node 前言 nvm是一个node版本控制的工具,他可以查看可以安装的node版本,安装node,以及切换node版本,传统的node安装,我们是下载压缩包,然后指定环境变量&…

蓝桥杯算法赛(二进制王国)

问题描述 二进制王国是一个非常特殊的国家,因为该国家的居民仅由 0 和 1 组成。 在这个国家中,每个家庭都可以用一个由 0 和 1 组成的字符串 S 来表示,例如 101、 000、 111 等。 现在,国王选了出 N 户家庭参加邻国的庆典…

吴恩达深度学习笔记:神经网络的编程基础2.15-2.17

目录 第一门课:神经网络和深度学习 (Neural Networks and Deep Learning)第二周:神经网络的编程基础 (Basics of Neural Network programming)2.15 Python 中的广播(Broadcasting in Python)2.16 关于 python _ numpy 向量的说明&…