嗨,我是小华同学,专注解锁高效工作与前沿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