大家好这里是前端组件开发。后台管理系统是前端开发中最常见的需求之一。选择一款合适的模板可以节省大量重复工作让开发者把精力集中在业务逻辑上。今天介绍的 Vue Naive Admin是一款基于 Vue3VitePiniaNaive 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.top2.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 技术栈源码可以在多个平台获取Giteehttps://gitee.com/isme-admin/isme-nest-serveGitHubhttps://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。开发者提供 WebPCH5 小程序的技术支持服务及定制开发不限前后端详细需求可联系作者微信是 isme-admin邮箱是 adminisme.top。版权方面项目使用 MIT 协议默认授权给任何人。简单来说作者只想保留版权没有任何其他限制。总结Vue Naive Admin 是一款极简风格的后台管理模板简单易用赏心悦目。历经十几次重构和细节打磨诚意满满。项目适合中小企业后台管理系统、在校大学生学习实践、个人开发者快速搭建以及外包项目快速交付。项目性能表现优异代码结构清晰文档完善。如果你正在寻找一款简单好用的 Vue3 后台管理模板Vue Naive Admin 值得尝试。项目地址https://gitee.com/isme-admin/vue-naive-admin