rengar-admin —— 轻量、现代的 Vue3+TS 后台管理模板

rengar-admin 是一个基于 Vue 3.5 + TypeScript 的轻量级后台管理模板，采用 Naive UI 组件库开发，主打简洁、易扩展和现代化技术栈，适合追求高效开发和灵活定制的开发者。

核心特性

技术栈
前端框架：Vue 3.5（Composition API）
组件库：Naive UI（简洁美观，支持暗黑模式）
构建工具：Vite 7（极速启动与热更新）
状态管理：Pinia（轻量替代 Vuex）
样式方案：UnoCSS（原子化 CSS 引擎）
包管理：pnpm（Monorepo 架构支持）
类型安全：TypeScript 100% 覆盖率
功能亮点
智能路由：自动根据目录结构生成路由配置，减少手动维护成本。
权限控制：基于角色的灵活权限系统，支持页面级权限配置。
页面缓存：自动注入组件名，实现多级路由的 KeepAlive 优化。
代码规范：集成 ESLint + Prettier + Husky，保障团队协作一致性。
极简依赖：无冗余库，目录结构清晰，文档完善，上手门槛低。

（界面简洁，支持暗黑模式）适用场景

适合：
需要极简、轻量后台模板的团队或个人开发者。
偏好 TypeScript 和现代前端技术栈的项目。
希望自定义业务逻辑，拒绝过度封装的场景。
不适合：
需要国际化（i18n）支持的项目（需自行扩展）。
依赖复杂内置功能（如富文本编辑器、高级图表等，需自行集成）。

快速上手

环境要求
Node.js ≥ 20
pnpm ≥ 9
Git
项目初始化
git clone git@github.com:RengarJS/rengar-admin.git your-project-namecd your-project-namepnpm install # 安装依赖（Monorepo 架构）pnpm dev # 启动开发服务器
关键配置修改
后端 API 地址：修改 .env.development 中的 VITE_API_URL。
请求拦截器：调整 src/api/request.ts 中的拦截逻辑。
登录逻辑：更新 src/views/login/index.vue 的表单与接口调用。
权限控制：编辑 src/stores/modules/auth.ts 的用户信息处理。

（智能路由与权限控制示例）开发工具推荐

VSCode 插件（项目已内置推荐配置）：
Vue Official：语法高亮与类型支持。
ESLint/Prettier：代码规范与格式化。
UnoCSS：原子化 CSS 智能提示。
Iconify IntelliSense：图标快速插入。

目录结构.github/ # GitHub Actions 配置.vscode/ # VSCode 推荐插件src/ # 核心代码 assets/ # 静态资源 components/ # 公共组件 config/ # 全局配置 router/ # 自动生成路由 stores/ # Pinia 状态管理 utils/ # 工具函数 views/ # 页面文件packages/ # Monorepo 子包（如 axios 封装、UnoCSS 配置）优势总结

性能优化：Vite + UnoCSS 实现秒级启动与按需加载。
开发体验：TypeScript + Composition API 提供类型安全与逻辑复用。
扩展性：模块化设计支持按需引入功能，避免臃肿。

在线体验：

Demo 演示

GitHub 地址：

github.com/RengarJS/rengar-admin

（响应式布局与页面缓存效果）

该模板通过精简的核心功能与高度可配置的设计，平衡了开发效率与灵活性，适合作为中后台项目的起点或学习现代 Vue 生态的参考案例。

Collapsible

热门标签

热点问答