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

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

在线体验

文档地址

rengar-admin，让你的后台开发更轻松、更高效！如果你喜欢这个项目，欢迎 Star、Fork、分享给更多开发者！

GitHub 地址：

项目简介

rengar-admin 是一款基于 Naive UI 开发的 Vue3+TypeScript 后台管理模板，主打轻量、简洁、易扩展。它摒弃了市面上许多后台模板的臃肿和过度封装，专注于提供最基础、最实用的后台功能，让开发者可以专注于业务开发，无需为模板冗余和复杂度买单。

完全开源、免费，采用最新vue3.5的语法，全面拥抱composition API。

"rengar" 一词来源于英雄联盟的英雄雷恩加尔的英文名称。

核心优势

🌈 优雅的设计：基于 Naive UI，界面简洁美观，完美适配暗黑模式
🚀 先进技术栈：Vue 3.5、Vite 6、TypeScript、Pinia、UnoCSS、pnpm monorepo 等前沿技术
🧩 智能路由系统：自动根据目录结构生成路由配置，开发高效便捷
🔒 权限系统：灵活的角色权限控制，支持页面级权限配置
💾 页面缓存增强：自动注入组件名称，轻松实现多级路由的 KeepAlive
🛠 类型安全：TypeScript 覆盖率 100%，配合 VS Code 智能提示，代码健壮可靠
🧹 代码规范：集成 ESLint、Prettier、Husky，保障团队协作质量
📦 极简依赖：无多余依赖，目录规范，文档完善，上手简单

技术栈

适用与不适用场景

适用：

追求极简、轻量、可维护后台模板的团队和个人
喜欢 TypeScript、现代前端技术栈的开发者
需要自定义业务功能、拒绝过度封装的项目

不适用：

需要国际化（i18n）方案的项目
需要内置很多复杂功能的用户（如需复杂功能请自行实现或选择其他模板）

目录结构简览

.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          # 项目说明文档

快速上手

环境要求

node.js: >= 20
pnpm: >= 9
git

创建项目

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的逻辑，打通用户详情接口

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