嗨，我是小华同学，专注解锁高效工作与前沿AI工具！每日精选开源技术、实战技巧，助你省时50%、领先他人一步。👉免费订阅，与10万+技术人共享升级秘籍！
naive-ui-pro 是一套完全免费的企业级中后台系统模板，基于 Vue3 + Vite + TypeScript + Unocss 与 Pro Naive UI。它最大的亮点是“基于路由的插件化架构”：把复杂功能拆成一个个“积木”插件按需组合，让你像搭积木一样搭出完整的 Admin 系统。项目内置 14+ 插件（权限、页签、面包屑、过渡、KeepAlive 等），并封装了大量常用组件（表单、表格、富文本……）可直接复用。
痛点场景：为什么中后台项目总是越做越“重”？
做中后台，你可能经历过这些“坑”：
-
需求一变，代码牵一发动全身； -
新人看不懂项目结构，改个小功能都心惊胆战； -
路由、权限、标签页、缓存、国际化……越堆越散，协作成本越来越高。
naive-ui-pro 的“插件化架构”正是为此而生：把这些高频能力做成可插拔的路由插件，分别负责一件小事，再统一织入路由生命周期。官方文档总结得很清楚：更易理解、更易维护、更易扩展，像搭积木一样演进系统，而不是一次性写死复杂度。
核心功能亮点
-
插件化路由体系（核心）
-
以路由为骨架，按需启用插件： progressPlugin（顶部进度条）、documentTitlePlugin（动态标题）、breadcrumbPlugin（面包屑）、tabsPlugin（多页签）、keepAlivePlugin（页面缓存）、transitionPlugin（过渡动画）、rbacAccessPlugin（前/后端权限）、nestedRouteRenderPlugin（嵌套路由渲染）等。
-
-
7 种布局 + 移动端适配
-
内置强大全局布局组件，桌面端与移动端都能丝滑切换，满足企业常见布局诉求
-
-
无头菜单能力
-
菜单“去样式化”，提供数据与行为，不绑样式，便于深度定制个性化导航。
-
-
Pro Naive UI 组件库
-
官方自研的 Pro Naive UI 组件库配套使用，封装大量业务常用高级组件，文档与 Demo 直接可用。
-
-
国际化（i18n）
-
内置国际化方案，支持多语言切换与消息翻译。
-
-
偏好设置 Pinia 插件
-
preferencePlugin用于持久化与一键重置/复制偏好配置（布局、主题等），非常适合做“个性化设置”。
-
-
请求提示插件（useRequest 扩展）
-
messageTipAfterRequestFinallyPlugin支持请求成功/失败自动消息提示，字符串/字典 Key/函数均可配置，统一错误处理也有约定。
-
-
宽松的工程规范 + 轻量化钩子
-
使用 simple-git-hooks仅在 commit 时格式化，降低团队引入门槛。
-
-
Mock 数据 & 示例页齐全
-
仓库内置 mock目录与丰富示例（403/404/500、列表、表单、下载、外链/内嵌等）帮助你快速对齐产品需求。
-
-
MIT 开源 + 在线预览 & 文档
-
提供在线预览与官方文档，许可为 MIT，商用零门槛。
-
技术架构
总体架构图
技术优势（要点）
| 模块 | 说明 | 价值 |
|---|---|---|
| 路由插件化 | 以插件承载功能（标题、面包屑、页签、过渡、缓存、自动重定向等） | 解耦清晰、按需接入、定位问题快，新增功能低风险。 |
| 权限插件 | rbacAccessPlugin 提供前端模式与后端模式；可控制登录/首页/动态路由/角色过滤等 |
满足从小型到企业级的不同权限来源与接入方式。 |
| 组件库联动 | 搭配 Pro Naive UI，常用业务组件开箱即用 | 大幅减少“重复造轮子”，统一视觉与交互体验。 |
| 偏好/主题 | preferencePlugin 一键重置/复制偏好，移动端亦适配 |
让系统“可配置”，运营/管理员自行调优界面。 |
| 请求体验 | useProRequest + 消息提示插件 + 统一错误映射 |
请求成功/失败反馈一致、可国际化、可统一治理。 |
| 工程化 | Vite + TypeScript + Unocss + 简化的 git hooks | 快速启动、类型安全、样式原子化、团队接入成本低。 |
界面效果
首页（亮色）：指标卡片、活动记录、项目动态一屏掌控
首页（暗色）：一键切换主题，夜间/多主题场景友好
登录页：极简登录流程，支持记住我与忘记密码入口
偏好设置面板：布局、顶栏、标签栏、侧边栏、页脚等均可开关 & 调整
用户列表：查询、重置、导出、分页等典型表格场景
移动端适配：表格、首页、侧边菜单在小屏设备上同样好用
使用方法（一步到位）
环境要求
-
Node.js ≥ 20 -
Git 任意版本 -
必须使用 pnpm（尽量使用最新版） （官方文档原文要求如上）
快速启动
# 1/ 克隆
git clone https://github.com/Zheng-Changfu/naive-ui-pro.git# 2/ 安装依赖（务必用 pnpm）
cd naive-ui-pro
pnpm i# 3/ 本地开发
pnpm dev# 4/ 生产构建
pnpm build按需启用“页面加载进度条”
// router.ts
import { createRouter, progressPlugin } from '@pro/router'const router = createRouter({
// ...
plugins: [progressPlugin()]
})-
效果：路由跳转顶部展示加载条，结束后平滑隐藏。
权限控制两种模式（RBAC）
前端模式（roles 本地控制）
import { createRouter, rbacAccessPlugin } from '@pro/router'const router = createRouter({
plugins: [
rbacAccessPlugin({
service: async () => ({
mode: 'frontend',
roles: ['admin'], // 当前用户角色
routes: [], // 动态生成的路由（将按角色过滤）
logined: true, // 是否已登录
homePath: '/home',
loginPath: '/login'
})
})
]
})// 路由元信息里可配置访问角色
const routes = [
{ path: '/login', component: Login, meta: { requiresAuth: false } },
{ path: '/users', component: Users, meta: { roles: ['admin', 'manager'] } }
]后端模式（菜单/权限由服务端下发）
import { createRouter, rbacAccessPlugin } from '@pro/router'const router = createRouter({
plugins: [
rbacAccessPlugin({
service: async () => ({
mode: 'backend',
logined: true,
fetchRoutes: () => http('/api/fetch-menus').then(res => res.data),
resolveComponent: (component: string) => pageMap[component],
homePath: '/home',
loginPath: '/login'
})
})
]
})两种模式可自由切换，满足不同组织形态。
偏好设置（Pinia 插件）
<script setup lang="ts">
import { useLayoutStore } from '@/store/use-layout-store'
const store = useLayoutStore()
</script><template><n-space><n-button @click="store.$resetAllPreference">重置配置</n-button><n-button @click="store.$copyAllPreference">复制配置到剪贴板</n-button></n-space>
</template>适合做“个性化主题/布局”的一键回滚与同步。
请求成功/失败消息提示（内置插件）
// 在组合式函数中使用（useProRequest 是 useRequest 的增强）
import axios from 'axios'
import { useProRequest } from '@/composables/use-pro-request'// 成功提示（固定文案/多语言 Key/函数）
useProRequest(() => axios.get('/api/xxx'), { successTip: true })
useProRequest(() => axios.get('/api/xxx'), { successTip: 'a.b.c' })
useProRequest(() => axios.get('/api/xxx'), { successTip: (data) => '操作成功' })// 失败提示（禁用/多语言 Key/自定义/函数）
useProRequest(() => axios.get('/api/xxx'), { errorTip: false })
useProRequest(() => axios.get('/api/xxx'), { errorTip: 'a.b.c' })
useProRequest(() => axios.get('/api/xxx'), { errorTip: (err) => '失败' })-
可在 resolveErrorMessage做全局错误映射与统一文案。
应用场景
-
企业中后台管理系统：多角色、多菜单、多页签、强缓存与权限的典型场景； -
运营/内容管理后台：表格、表单、富文本、导出下载等高频页面； -
多端适配的管理平台：移动端适配 + 主题切换，满足“白天/夜间”和“小屏巡查”需求。
官方定位即“中大型管理系统开发”的解决方案，配有在线预览和完整文档，开箱即用。
与同类项目对比及产品优势
| 维度 | naive-ui-pro | Soybean Admin | Vue Vben Admin | Arco Design Pro Vue |
|---|---|---|---|---|
| Star（GitHub） | 436 | 13.1k | 30.1k | 1.7k |
| UI 体系 | Naive UI + Pro Naive UI | Naive UI | （当前）Shadcn UI（历史版本包含 Ant Design 等） | Arco Design |
| 架构特征 | 路由插件化，14+ 插件按需插拔 | Monorepo 结构、自动化文件路由、主题丰富 | 多主题、国际化、权限、Monorepo、生态成熟 | 官方设计体系模板，16+ 页面模板 |
| 权限能力 | RBAC 前后端双模式 | 前端静态/后端动态路由 | 动态路由权限方案 | 内置 i18n & Mock，偏工程化 |
| 上手路径 | 文档 + 预览 + README 命令 | 文档体系完善、视频教程 | 文档与社区活跃度高 | 配套 CLI 初始化项目 |
| 适合人群 | 想要按插件思维快速组装功能的团队 | 追求整洁规范/多主题的团队 | 需要强生态与扩展的大型团队 | 需要Arco 设计体系的一体化体验 |
产品优势总结
-
可插拔可演进：以插件组织一切路由相关能力，利于扩展与治理； -
工程体验轻：Vite + TS + Unocss，配套组件库与示例齐全，真·开箱即用； -
权限灵活：前后端两种模式无缝切换，适配从小团队到企业级组织结构。
典型落地流程
文章小结
如果你正在寻找一套像搭积木那样扩展的 Admin 基座，naive-ui-pro 借助“路由插件化”把中后台的复杂度化整为零：你可以先把“标题、面包屑、页签、过渡、缓存”等这些“共性能力”装好，再逐步拼装权限与业务页面；同时，偏好设置、请求提示、国际化与移动端适配也都准备好了。在线预览 + 完整文档 + MIT 许可，让它既适合新项目起步，也适合老项目改造。
项目地址
https://github.com/Zheng-Changfu/naive-ui-pro