网站首页 > 教程文章 正文
如果您对源码&技术感兴趣,请点赞+收藏+转发+关注,大家的支持是我分享最大的动力!!!
项目介绍
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
如果您对源码&技术感兴趣,请点赞+收藏+转发+关注,大家的支持是我分享最大的动力!!!
- 上一篇: vue3使用vue-i18n国际化_vue 国际化
- 下一篇: Vue CLI相关配置_vue—cli
猜你喜欢
- 2025-08-26 前端分享-VueUse着实是有东西的_vue.use是什么
- 2025-08-26 Vue CLI相关配置_vue—cli
- 2025-08-26 vue3使用vue-i18n国际化_vue 国际化
- 2025-08-26 超惊艳 Vue3.x 组件库Na"ive UI_文笔超惊艳的高质量小说古言
- 2025-08-26 vue:组件中之间的传值_vue组件之间的传值方式
- 2025-08-26 Vue3 的 RouterView 父级和子页面数据交互
- 2025-08-26 Vue前端开发——组件篇_vue 前端组件
- 2025-08-26 超好看 vue2.x 音频播放器组件Vue-APlayer
- 2025-08-26 Vuex与SpreadJS施展“组合拳”,实现大屏展示应用的交互增强
- 2025-08-26 别再用React/Vue了!14KB的htmx如何让你的网站性能提升300%
- 最近发表
- 标签列表
-
- location.href (44)
- document.ready (36)
- git checkout -b (34)
- 跃点数 (35)
- 阿里云镜像地址 (33)
- qt qmessagebox (36)
- mybatis plus page (35)
- vue @scroll (38)
- 堆栈区别 (33)
- 什么是容器 (33)
- sha1 md5 (33)
- navicat导出数据 (34)
- 阿里云acp考试 (33)
- 阿里云 nacos (34)
- redhat官网下载镜像 (36)
- srs服务器 (33)
- pico开发者 (33)
- https的端口号 (34)
- vscode更改主题 (35)
- 阿里云资源池 (34)
- os.path.join (33)
- redis aof rdb 区别 (33)
- 302跳转 (33)
- http method (35)
- js array splice (33)