10k star!一款清新优雅的后台管理系统,很赞!

今天给大家分享的开源项目是一个优雅清新后台管理系统——Soybean Admin

简介

Soybean Admin是一个基于Vue3、Vite3、TypeScript、NaiveUI、Pinia和 UnoCSS的清新优雅的后台管理系统模板。它使用了最新的前端技术栈,内置丰富的主题配置,有着极高的代码规范,基于mock实现的动态权限路由,开箱即用的后台前端解决方案,也可用于学习参考

特性

  1. 前沿技术应用:我们采用了Vue3, Vite5, TypeScript, Pinia和UnoCSS等最新的流行技术栈,以确保项目的先进性和稳定性。
  2. 清晰的项目架构:我们使用了pnpm monorepo架构,使得项目结构清晰、优雅且易于理解。
  3. 严格的代码规范:我们遵循SoybeanJS规范,并集成了eslint, prettier和simple-git-hooks,以确保代码的规范性和一致性。
  4. TypeScript支持:我们支持严格的类型检查,以提高代码的可维护性。
  5. 丰富的主题配置:我们内置了多样的主题配置,并与UnoCSS完美结合,以满足不同用户的需求。
  6. 内置国际化方案:我们轻松实现了多语言支持,方便用户使用不同的语言环境。
  7. 自动化文件路由系统:我们自动生成路由导入、声明和类型,更多细节请查看Elegant Router。
  8. 灵活的权限路由:我们同时支持前端静态路由和后端动态路由,以满足不同场景的需求。
  9. 丰富的页面组件:我们内置了多样的页面和组件,包括403、404、500页面,以及布局组件、标签组件、主题配置组件等,以提供更丰富的功能。
  10. 命令行工具:我们内置了高效的命令行工具,方便用户进行git提交、删除文件、发布等操作。
  11. 移动端适配:我们完美支持移动端,实现了自适应布局,以提供更好的移动用户体验。

项目展示

接下来,小编带大家一起来看看项目预览。

登录界面

仪表盘

文档

内置各种组件

内置了丰富多样的组件,供我们日常使用。比如各种类型的按钮、卡片和表格等,如下图:

各类插件

整合了各种常用的插件,包括图表、地图、视频、编辑器和图标等。通过引入相应的组件和库,即可在项目中轻松使用,如下图所示:

异常页面

为常见的异常页面(403、404、500)提供了个性化的设计,让用户在遇到问题时也能感受到一丝惊喜和趣味。

主题配色

提供了丰富多样的主题配色,并且支持个性化的界面功能设置。用户可以根据自己的需求,选择合适的主题和界面样式,如下图所示:

深色模式

还支持深色模式,可以在不同的环境和偏好下,切换界面的明暗色调,以获得更加舒适的视觉体验。

安装使用

要在本地使用Soybean Admin,首先需要确保安装了需要安装 pnpm 7.x 、Node.js 14.18+ 和 Git。然后按照以下步骤进行操作:

  1. 克隆项目代码:
git clone https://github.com/honghuangdc/soybean-admin.git
  1. 安装依赖:
pnpm i
  1. 运行项目:
pnpm dev

4.打包

pnpm build

如果你想使用Docker进行部署,可以执行以下命令:

docker build -t soybean-admin-image -f docker/Dockerfile .
docker run -d -p 80:80 soybean-admin-image

然后打开本地浏览器,访问http://localhost,即可访问Soybean Admin了。

需要注意的是,官方推荐使用Chrome 90+浏览器进行开发和浏览,不支持IE浏览器。

关于项目的更多内容,感兴趣的小伙伴可以去项目地址探索~~~

项目地址:

https://github.com/honghuangdc/soybean-admin

[新春采购季]京东云 服务器2核2G 51元起/年 点这里优惠购买
[新春采购季]阿里云 服务器2核2G 61元起/年 点这里优惠购买
[新春采购季]腾讯云 云服务器2核2G 61起/年 点这里优惠购买
感谢您的来访,获取更多精彩文章请Ctrl+D收藏本站。
更多精彩文章,请收藏本站
本文为【软件乐园】原创文章
转载请附上原文链接:https://app.qiip.cc/archives/8312
本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长删除处理。
本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
THE END
分享
二维码
< <上一篇
下一篇>>