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/

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

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