大家好，这里是前端组件开发。
后台管理系统是前端开发中最常见的需求之一。选择一款合适的模板，可以节省大量重复工作，让开发者把精力集中在业务逻辑上。今天介绍的 Vue Naive Admin，是一款基于 Vue3+Vite+Pinia+Naive UI 的轻量级后台管理模板，2022 年 2 月开始开源，至今已经迭代了两年多时间。
项目历经十几次重构和细节打磨，一直秉持着"简单即正义"的理念。技术选型简单直接，代码结构清晰易懂，文档完善便于上手。目标用户是中小企业、在校大学生及个人开发者，这些群体通常需要一个能够快速上手、易于维护的后台管理解决方案。
为了降低使用者的学习成本，前端部分没有使用看似主流的 TypeScript，而是选择了 JavaScript。这也使得 Vue Naive Admin 成为了市面上少有的使用 JavaScript 的 Vue3 后台管理模板。从实际反馈来看，这个决定得到了大量朋友的认可和喜爱，很多开发者表示正是因为它没有使用 TypeScript，才能够快速理解代码并应用到自己的项目中。
技术栈选型
前端技术栈采用 Vite + Vue3 + Pinia + Unocss 的组合，这是 2024 年 Vue 生态的主流选择。
Vite 作为下一代前端构建工具，基于原生 ESM 实现，开发服务器启动速度极快，热更新几乎是瞬时的。Vue3 提供组合式 API，逻辑复用更加方便，性能相比 Vue2 有显著提升。Pinia 是 Vue 官方推荐的状态管理方案，API 设计简洁，体积小巧。Unocss 是原子化 CSS 框架，按需生成样式，打包体积小，使用灵活。
UI 组件库选择 Naive UI，特点是组件丰富、主题定制简单。项目的代码风格极致简洁，页面设计清爽，审美在线，主题可以轻松定制。
图标方案使用 iconify + unocss 的组合，这是目前主流的选择。iconify 提供海量图标资源，unocss 提供便捷的图标使用方式，支持自定义图标和动态渲染，按需加载不增加打包体积。
后端技术栈使用 Nestjs + TypeOrm + MySql，内置 JWT 认证、RBAC 权限控制及模板所需的基础接口。
核心特性
路由设计是项目的一大亮点。采用扁平化路由设计，每一个组件都可以是一个页面，告别了多级路由 KeepAlive 难实现的问题。传统的多级路由嵌套结构复杂，KeepAlive 缓存难以精确控制，而扁平化路由让每个页面独立，缓存管理变得简单直接。
权限控制方面，项目基于权限动态生成路由，无需额外定义路由。用户登录后，系统根据角色权限自动生成可访问的路由表。403 和 404 页面可以明确区分，而不是无权限也跳 404，这样便于排查问题。
文件结构设计先进且易于理解，多个模块之间零耦合。这意味着单个业务模块删除不会影响其他模块，维护和扩展都非常方便。2.0 版本的灵活度远高于 1.0，只要开发者愿意，可以为每个页面单独定制一个 layout，这种灵活性在同类模板中比较少见。
状态管理使用 Pinia，支持状态持久化。页面刷新后，用户信息、权限配置等关键数据不会丢失，用户体验更好。权限模块基于 Redis 集成无感刷新机制，Token 即将过期时自动刷新，用户无感知，既保证了安全性又不影响使用体验。
组件封装是另一个重点。基于 Naive UI 封装了常用的业务组件，包括 Page 组件、CRUD 表格组件及 Modal 组件等。Page 组件统一页面布局结构。CRUD 表格组件整合了表格、表单和分页功能，快速实现增删改查。Modal 组件支持嵌套和自定义。message 全局工具方法支持批量提醒和跨页面单例模式，减少大量重复性工作。
版本对比
Vue Naive Admin 从 1.0 发展到 2.0，经历了一次从 0 到 1 的重新设计。2.0 是基于 1.0 的风格重新设计的，所以看起来跟 1.0 很像，但其实代码结构差别挺大的。
1.0 版本只提供前端，后端使用 Mock 模拟数据。2.0 版本则是全栈版，提供真实的后端接口，可以直接对接实际项目使用。2.0 虽然版本高于 1.0，但复杂度却远低于 1.0。2.0 的灵活度远高于 1.0，开发者可以为每个页面单独定制 layout。
在线体验地址：
1.0 版本预览：https://template.isme.top
2.0 版本预览：https://admin.isme.top
建议新项目直接使用 2.0 版本，获得完整的全栈支持和更好的灵活性。
快速开始
使用 degit 克隆仓库是最推荐的方式，这样没有任何历史提交记录：
npx degit zclzone/vue-naive-admin进入项目目录，安装依赖并启动：
cd vue-naive-admin npm install npm run dev启动开发服务器后，访问 http://localhost:5173 即可预览。项目默认提供 Mock 数据，可以直接查看效果。如需对接真实后端，参考官方文档配置接口地址。
后端方案
官方提供的后端代码使用 Nestjs + TypeOrm + MySql 技术栈，源码可以在多个平台获取：
Gitee：https://gitee.com/isme-admin/isme-nest-serve
GitHub：https://github.com/zclzone/isme-nest-serve
除了官方后端，社区还对接了其他后端方案。isme-java-serve 是一个轻量级的 Java 后端服务，基于 SpringBoot、MybatisPlus、SaToken 等实现，已对接 Vue Naive Admin 2.0。naive-admin-go 是一个 Go 后端服务，基于 gin、gorm、mysql、jwt 和 session，也已对接 2.0 版本。isme-java 是一个轻量且完成度高的 Java 后端服务，基于 Springboot 3 + JDK21，已集成账号管理、权限管理、API 鉴权、消息国际化等功能。
常见问题
关于菜单管理，这是比较常见的问题。项目由后端控制菜单资源，所以需要对接后端后在资源管理功能对菜单进行增删改，然后在角色管理功能给对应角色进行授权。如果有些菜单不想通过权限控制，可以在/src/settings.js文件添加 basePermissions，只需对齐菜单资源的结构即可。
项目文档地址是 https://isme.top，接口文档地址是 https://apifox.com/apidoc/shared-ff4a4d32-c0d1-4caf-b0ee-6abc130f734a。开发者提供 Web（PC+H5+ 小程序）的技术支持服务及定制开发，不限前后端，详细需求可联系作者，微信是 isme-admin，邮箱是 admin@isme.top。
版权方面，项目使用 MIT 协议，默认授权给任何人。简单来说，作者只想保留版权，没有任何其他限制。
总结
Vue Naive Admin 是一款极简风格的后台管理模板，简单易用，赏心悦目。历经十几次重构和细节打磨，诚意满满。项目适合中小企业后台管理系统、在校大学生学习实践、个人开发者快速搭建以及外包项目快速交付。
项目性能表现优异，代码结构清晰，文档完善。如果你正在寻找一款简单好用的 Vue3 后台管理模板，Vue Naive Admin 值得尝试。
项目地址：https://gitee.com/isme-admin/vue-naive-admin
