SoybeanAdmin：Vue3 管理后台模板，10 分钟跑通布局、权限与主题配置

SoybeanAdminVue3 管理后台模板10 分钟跑通布局、权限与主题配置【免费下载链接】soybean-adminA clean, elegant, beautiful and powerful admin template, based on Vue3, Vite7, TypeScript, Pinia, NaiveUI and UnoCSS. 一个清新优雅、高颜值且功能强大的后台管理模板基于最新的前端技术栈包括 Vue3, Vite8, TypeScript, Pinia, NaiveUI 和 UnoCSS。项目地址: https://gitcode.com/GitHub_Trending/soy/soybean-admin开一个中后台项目最磨人的往往不是业务代码布局怎么搭、登录页怎么套、菜单权限怎么控、深浅色主题怎么切这些基础设施从零写一遍少则两三天。SoybeanAdmin 是一个基于 Vue3 的开源管理后台模板把这些全部做成了开箱即用的部分clone 下来pnpm dev就能跑。项目名片SoybeanAdmin 是一个清新优雅、功能完整的中后台管理模板目标是无需额外配置、开箱即用。技术底座是 Vue3 Vite8 TypeScript Pinia NaiveUI UnoCSS采用 pnpm monorepo 组织代码公共能力hooks、axios 封装、工具函数等拆在 packages/ 下主应用代码在 src/结构清晰。仓库地址https://gitcode.com/GitHub_Trending/soy/soybean-adminMIT 协议可免费商用。核心能力拆解开箱体验clone 下来就有完整管理后台先说结论这不是一个只有空布局的骨架而是一个能看能登能跑的完整后台。内置登录流程账号密码登录、短信验证码登录、注册、忘记密码、微信绑定源码在 src/views/_builtin/login/业务页面直接复用。内置首页工作台数据卡片、ECharts 折线图/饼图、项目动态等模块在 src/views/home/modules/可作为业务首页的起点。内置 403/404/500 异常页、全局搜索、多标签页、面包屑、页脚等后台标配缺什么补什么而不是从零搭。权限怎么配前端静态与后端动态两种路由模式这是很多模板的薄弱点SoybeanAdmin 把它做成了可切换的方案。开发环境推荐用前端静态路由路由由 Elegant Router 插件根据 src/views/ 目录自动生成导入、声明和类型见 src/router/elegant/新增页面文件即新增路由不用手写路由表。生产环境可切后端动态路由登录态下从后端拉取当前用户的菜单按角色过滤后注册相关逻辑在 src/store/modules/route/通过环境变量VITE_AUTH_ROUTE_MODE控制。路由守卫登录校验、权限校验集中在 src/router/guard/接入自己的鉴权接口时改动面很小。主题与布局侧边栏直接拖出来的视觉效果模板把换肤做成了产品功能不是改代码。内置 5 种布局模式垂直、垂直混合、水平、上混合侧边栏优先、上混合头部优先可在右上角主题抽屉里实时切换源码见 src/layouts/modules/theme-drawer/。支持深色模式、灰度模式、色弱模式、主题色/圆角调节预设主题存在 src/theme/preset/如 compact、dark、azir主题默认值集中在 src/theme/settings.ts。标签页支持 chrome、button、slider 三种风格src/layouts/modules/global-tab/还内置了水印开关。移动端适配与国际化布局对移动端做了自适应侧边栏、菜单在小屏下可折叠切换适合内网移动办公场景。内置 vue-i18n 多语言方案中英文文案在 src/locales/langs/顶部有语言切换入口菜单、面包屑会随语言自动更新。上手与落地环境要求Node 20.19.0、pnpm 10.5.0monorepo 项目请只用 pnpm 装依赖。git clone https://gitcode.com/GitHub_Trending/soy/soybean-admin cd soybean-admin pnpm i pnpm dev什么业务套上去最快内部管理系统、CMS 后台、电商/订单运营后台这类登录 菜单 增删改查列表 图表看板结构的系统。模板里的请求封装在 src/service/支持 axios 与 alova 两种方案monorepo 里分别放在 packages/axios/、packages/alova/把 src/service/api/ 下的接口换成自己的后端即可README 提到项目采用基于 ApiFox 的在线 Mock 方案联调前期可以少等后端。可能需要自行改造的地方一是登录鉴权要与自己的用户体系、JWT/会话方案对接二是如果团队不习惯 NaiveUI可以选作者维护的 Ant Design Vue / Element Plus 版本见 README 版本说明三是 monorepo 对新手有一定认知成本sa命令行工具git 提交规范校验、release、路由生成源码在 packages/scripts/建议先读一遍文档再动。适合谁 / 选型提醒适合用 Vue3 做企业级后台的团队想学习现代前端工程化严格 TS、eslint/oxlint、git hooks、monorepo、自动化路由的开发者README 里也把它定位为快速学习前沿技术的最佳实践。适合需要多布局、多主题、移动端适配的 B 端产品二次开发成本明显低于从零搭。不适合只需要一个页面级静态官网或小程序的开发者对 pnpm 工作区完全陌生且没时间学习的同学先花半小时理解 monorepo 结构会更顺。踩坑提示浏览器推荐最新版 ChromeIE 不支持pre-commit 钩子会强制跑 typecheck lint提交前先保证代码规范。如果你正在找一个视觉和工程规范都在线的 Vue3 管理后台脚手架SoybeanAdmin 值得放进选型清单直接试用。觉得有用的话欢迎给仓库点个 star详细用法以官方文档为准。本文信息基于 SoybeanAdmin 仓库 README、package.json 及源码结构整理具体细节与最新版本请以官方文档为准。【免费下载链接】soybean-adminA clean, elegant, beautiful and powerful admin template, based on Vue3, Vite7, TypeScript, Pinia, NaiveUI and UnoCSS. 一个清新优雅、高颜值且功能强大的后台管理模板基于最新的前端技术栈包括 Vue3, Vite8, TypeScript, Pinia, NaiveUI 和 UnoCSS。项目地址: https://gitcode.com/GitHub_Trending/soy/soybean-admin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考