历经8个月，rengar-admin2.1来了
在线体验
文档地址
📚 开发文档
如果您觉得
Rengar-admin对您有所帮助，或者您喜欢我们的项目，请在 GitHub 上给我们一个 ⭐️。您的支持是我们持续改进和增加新功能的动力！感谢您的支持！
GitHub 地址：github.com/RengarJS/re…
项目简介
rengar-admin 是一款基于 Naive UI 开发的 Vue3+TypeScript 后台管理模板，主打轻量、简洁、易扩展。它摒弃了市面上许多后台模板的臃肿和过度封装，专注于提供最基础、最实用的后台功能，让开发者可以专注于业务开发，无需为模板冗余和复杂度买单。
完全开源、免费，采用最新vue3.5的语法，全面拥抱composition API。
"rengar" 一词来源于英雄联盟的英雄雷恩加尔的英文名称。
与1.0相比
🚀 核心功能
-
🔍 新增搜索功能
支持全局或页面级内容快速检索，提升用户体验。 -
💧 新增全局水印功能
可配置用户信息水印，保障数据安全与版权。 -
🎨 新增无障碍视觉模式
- 色弱模式（Color Weakness Mode）
- 灰色模式（Grayscale Mode）
满足多样化视觉需求，提升可访问性。
-
🌀 新增多种路由动画
页面切换支持淡入、滑动、缩放等过渡效果，交互更流畅。 -
🌐 Vite 代理配置支持
新增vite.config.ts中的 proxy 代理，方便本地联调真实后端接口。
🧭 路由增强
-
🗺️ 类型化路由自动生成
基于文件系统路由，配合插件生成 TypeScript 类型定义，实现：- 路由跳转时的 智能类型提示
- 编译期路径校验，杜绝拼写错误
-
📌 路由 meta 扩展参数
multipleTab: boolean：控制是否允许多标签页打开showBack: boolean：控制页面是否显示返回按钮
更灵活地管理页面行为与布局。
⚙️ 架构升级
-
🔄 后端 API 切换为真实线上服务
不再依赖 Apifox Mock，全面对接 生产级后端接口，确保开发与上线环境一致。📦 后端项目地址：[github.com/RengarJS/re…]
🐞 稳定性提升
- 🛠️ 修复若干关键 Bug
包括路由缓存异常、状态管理冲突、UI 渲染错位等问题，达到生产环境稳定水平。
核心优势
- 💰 完全免费：完全开源免费，遵循 MIT 开源协议，你可以自由使用、修改和分发
- 🚀 维护积极：bug修复速度快，积极维护，不烂尾，有问题随时交流
- 🏭 生产环境验证： 真实的后端部署（非mock接口），提供开源的后端，经过生产环境验证，确保稳定性和性能
- 🎨 优雅的设计： 基于 Naive UI 精心打造，界面简洁美观，完美适配暗黑模式，代码简单易懂，无过度封装
- 💻 先进技术栈： 采用 Vue 3.5 + Vite 7 + TypeScript + Naive UI + Pinia + UnoCSS 等前沿技术
- 🌐 智能路由： 创新的文件系统路由，根据目录结构自动生成路由配置，适配vue-router类型化路由
- 🔍 页面缓存增强： 特殊的路由缓存方案，自动注入组件名称，轻松实现多级路由的 KeepAlive 功能
- ✅ 类型安全： TypeScript 类型覆盖率 100%，配合 VS Code 享受智能提示，让代码更加健壮可靠
- 📱 响应式布局： 响应式布局，支持 PC、平板、手机等设备，适配多种屏幕尺寸
技术栈
目录结构简览
.github/ # GitHub Actions 配置及工作流
.vscode/ # 推荐 VSCode 插件配置
build/ # 构建相关插件
dist/ # 打包输出目录
node_modules/ # 依赖包
packages/ # monorepo 子包（如 axios、unocss 插件等）
axios/ # axios 封装
color/ # 颜色相关工具
unocss/ # UnoCSS 配置
vite-plugin-version/ # 版本信息插件
vite-plugin-vue-inject-name/ # 自动注入组件名插件
vite-plugin-vue-routes/ # 自动路由生成插件
public/ # 静态资源
src/ # 主业务代码目录
assets/ # 静态资源
components/ # 公共组件
config/ # 配置文件
hooks/ # 自定义Hooks
layouts/ # 布局组件
main.ts # 入口TS文件
plugins/ # 插件
router/ # 路由配置
stores/ # 状态管理
utils/ # 工具函数
views/ # 页面视图
typings/ # 类型定义
.env* # 多环境变量配置
.gitignore # Git 忽略文件配置
package.json # 项目依赖与脚本
pnpm-workspace.yaml# monorepo 配置
README.md # 项目说明文档
快速上手
环境要求
创建项目
git clone git@github.com:RengarJS/rengar-admin.git your-project-name
安装依赖
注意：
rengar-admin使用了基于pnpm的monorepo架构，所以请使用pnpm进行依赖安装。
pnpm install
启动项目
pnpm dev
打包项目
pnpm build
VSCode 扩展推荐
提示：你无需手动去安装以下扩展，使用
vscode打开会提示你安装这些推荐的扩展。
- Vue Official：Vue 官方推荐的语法高亮与类型支持插件
- ESLint：代码规范检查工具
- Prettier - Code formatter：代码格式化工具
- UnoCSS：原子化 CSS 引擎
- Iconify IntelliSense：图标智能提示
- icones：图标管理与搜索工具
- EditorConfig for VS Code：统一代码风格配置
- Vue VSCode Snippets：Vue 代码片段
最佳实践
首先请阅读一下全部的文档，大致了解一下rengar-admin的功能，然后参照以下步骤修改，快速开发：
- 修改
.env.development的VITE_API_URL为你自己的后端 api - 修改
src/api/request.ts的请求拦截器和响应拦截器的方法 - 修改
src/views/login/index.vue的登录参数和相关的后端 api 请求、响应参数 - 修改
src/stores/modules/auth.ts的逻辑，打通用户详情接口
