抓紧上车，别再错过啦， Github 开源后台管理平台，Naive UI ！！！

嗨，我是小华同学，专注解锁高效工作与前沿AI工具！每日精选开源技术、实战技巧，助你省时50%、领先他人一步。👉免费订阅，与10万+技术人共享升级秘籍！

naive-ui-pro 是一套完全免费的企业级中后台系统模板，基于 Vue3 + Vite + TypeScript + Unocss 与 Pro Naive UI。它最大的亮点是“基于路由的插件化架构”：把复杂功能拆成一个个“积木”插件按需组合，让你像搭积木一样搭出完整的 Admin 系统。项目内置 14+ 插件（权限、页签、面包屑、过渡、KeepAlive 等），并封装了大量常用组件（表单、表格、富文本……）可直接复用。

痛点场景：为什么中后台项目总是越做越“重”？

做中后台，你可能经历过这些“坑”：

• 需求一变，代码牵一发动全身；
• 新人看不懂项目结构，改个小功能都心惊胆战；
• 路由、权限、标签页、缓存、国际化……越堆越散，协作成本越来越高。

naive-ui-pro 的“插件化架构”正是为此而生：把这些高频能力做成可插拔的路由插件，分别负责一件小事，再统一织入路由生命周期。官方文档总结得很清楚：更易理解、更易维护、更易扩展，像搭积木一样演进系统，而不是一次性写死复杂度。

核心功能亮点

1. 插件化路由体系（核心）

• 以路由为骨架，按需启用插件：progressPlugin（顶部进度条）、documentTitlePlugin（动态标题）、breadcrumbPlugin（面包屑）、tabsPlugin（多页签）、keepAlivePlugin（页面缓存）、transitionPlugin（过渡动画）、rbacAccessPlugin（前/后端权限）、nestedRouteRenderPlugin（嵌套路由渲染）等。

2. 7 种布局 + 移动端适配

• 内置强大全局布局组件，桌面端与移动端都能丝滑切换，满足企业常见布局诉求

3. 无头菜单能力

• 菜单“去样式化”，提供数据与行为，不绑样式，便于深度定制个性化导航。

4. Pro Naive UI 组件库

• 官方自研的 Pro Naive UI 组件库配套使用，封装大量业务常用高级组件，文档与 Demo 直接可用。

5. 国际化（i18n）

• 内置国际化方案，支持多语言切换与消息翻译。

6. 偏好设置 Pinia 插件

• preferencePlugin 用于持久化与一键重置/复制偏好配置（布局、主题等），非常适合做“个性化设置”。

7. 请求提示插件（useRequest 扩展）

• messageTipAfterRequestFinallyPlugin 支持请求成功/失败自动消息提示，字符串/字典 Key/函数均可配置，统一错误处理也有约定。

8. 宽松的工程规范 + 轻量化钩子

• 使用 simple-git-hooks 仅在 commit 时格式化，降低团队引入门槛。

9. Mock 数据 & 示例页齐全

• 仓库内置 mock 目录与丰富示例（403/404/500、列表、表单、下载、外链/内嵌等）帮助你快速对齐产品需求。

10. MIT 开源 + 在线预览 & 文档

• 提供在线预览与官方文档，许可为 MIT，商用零门槛。

技术架构

总体架构图

技术优势（要点）

界面效果

首页（亮色）：指标卡片、活动记录、项目动态一屏掌控

用户列表：查询、重置、导出、分页等典型表格场景

naive-ui-pro-5

使用方法（一步到位）

环境要求

• 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 做全局错误映射与统一文案。

应用场景

• 企业中后台管理系统：多角色、多菜单、多页签、强缓存与权限的典型场景；
• 运营/内容管理后台：表格、表单、富文本、导出下载等高频页面；
• 多端适配的管理平台：移动端适配 + 主题切换，满足“白天/夜间”和“小屏巡查”需求。

官方定位即“中大型管理系统开发”的解决方案，配有在线预览和完整文档，开箱即用。

与同类项目对比及产品优势

产品优势总结

• 可插拔可演进：以插件组织一切路由相关能力，利于扩展与治理；
• 工程体验轻：Vite + TS + Unocss，配套组件库与示例齐全，真·开箱即用；
• 权限灵活：前后端两种模式无缝切换，适配从小团队到企业级组织结构。

典型落地流程

文章小结

如果你正在寻找一套像搭积木那样扩展的 Admin 基座，naive-ui-pro 借助“路由插件化”把中后台的复杂度化整为零：你可以先把“标题、面包屑、页签、过渡、缓存”等这些“共性能力”装好，再逐步拼装权限与业务页面；同时，偏好设置、请求提示、国际化与移动端适配也都准备好了。在线预览 + 完整文档 + MIT 许可，让它既适合新项目起步，也适合老项目改造。

项目地址

https://github.com/Zheng-Changfu/naive-ui-pro