云计算、AI、云原生、大数据等一站式技术学习平台

网站首页 > 教程文章 正文

【推荐】一款轻量简洁优雅的 Vue3 中后台管理模板,开源免费可商用

jxf315 2025-08-26 18:12:33 教程文章 2 ℃

如果您对源码&技术感兴趣,请点赞+收藏+转发+关注,大家的支持是我分享最大的动力!!!

项目介绍

Vue Naive Admin 是一款开源(MIT License)、极简风格的后台管理模板,包含前后端解决方案,前端使用 Vite + Vue3 + Pinia + Unocss,后端使用 Nestjs + TypeOrm + MySql,简单易用,赏心悦目,历经十几次重构和细节打磨,诚意满满!

设计理念

旨在帮助中小企业、在校大学生及个人开发者快速上手开发后台管理项目。该项目自 2022 年 2 月开始开源,历经多次重构和细节打磨,以其简单易用、赏心悦目的特点得到了大量用户的认可和喜爱。

应用场景

Vue Naive Admin 适用于各种需要后台管理系统的场景,包括但不限于:

  • 中小型企业内部的管理系统。
  • 在校大学生的课程设计或项目实践。
  • 个人开发者的后台管理工具。
  • 需要快速搭建后台管理界面的项目等。

功能模块

  • 用户管理:支持用户注册、登录、权限分配等
  • 角色管理:支持角色的创建、编辑、删除及权限授权
  • 菜单管理:支持菜单的增删改查,以及菜单与角色的关联
  • 权限管理:基于角色的权限控制,实现细粒度的权限划分
  • 基础接口:内置 JWT、RABC 及模板所需的一些基础接口
  • 其他模块:如数据统计、日志管理等,可根据实际需求进行扩展

功能特点

  • 极简风格:界面简洁明了,操作方便,用户体验极佳
  • 前后端分离:前端使用 Vite + Vue3 + Pinia + Unocss,后端使用 Nestjs + TypeOrm + MySql,易于维护和扩展
  • 无 TypeScript:前端未使用 TypeScript,降低了学习成本,适合 JavaScript 开发者
  • 原子 CSS 框架:使用 Unocss,优雅、轻量、易用,提高开发效率
  • 状态管理:集成 Pinia 状态管理,支持状态持久化,方便管理全局状态
  • 图标方案:使用主流的 iconify + unocss 图标方案,支持自定义图标和动态渲染
  • 主题定制:使用 Naive UI,极致简洁的代码风格和清爽的页面设计,主题轻松定制
  • 扁平化路由设计:每一个组件都可以是一个页面,告别多级路由 KeepAlive 难实现问题
  • 基于权限动态生成路由:无需额外定义路由,403 和 404 页面可区分
  • 无感刷新:基于 Redis 集成无感刷新,用户登录态可控,安全与体验缺一不可

项目技术栈

  • Vite:构建工具,快速启动和打包
  • Vue3:前端框架,响应式编程,易于上手
  • Pinia:状态管理库,替代 Vuex,更加简洁易用
  • Unocss:原子 CSS 框架,提高样式开发效率
  • Naive UI:基于 Vue3 的 UI 组件库,简洁美观

功能演示

开源地址

https://gitee.com/isme-admin/vue-naive-admin

如果您对源码&技术感兴趣,请点赞+收藏+转发+关注,大家的支持是我分享最大的动力!!!

最近发表
标签列表