返回排行榜

zclzone/vue-naive-admin

Vueadmin.isme.top

⚡️基于 Vue3 + Vite + Pinia + Unocss + Naive UI 的轻量级后台管理模板。

vue3naiveuiviteadminvue-adminpiniajavascriptnaive-uiunocssvuetypescriptunplugin
Star 增长趋势
Star
4k
Forks
589
周增长
Issues
1
1k2k3k
2022年2月2023年7月2025年1月2026年7月
README

Vue Naive Admin Logo

MIT License GitCode


Featured|HelloGitHub

[!Tip] 我们提供Web(PC+H5+小程序)的技术支持服务及定制开发,不限前后端,详细需求可联系作者,微信: isme-admin,邮箱: admin@isme.top

简介

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

设计理念

Vue Naive Admin 2022年2月开始开源,从 1.0 到现在的 2.0,一直秉持着简单即正义的理念,旨在帮助中小企业、在校大学生及个人开发者快速上手开发后台管理项目,为了降低使用者的学习成本,没有使用看似主流的 TypeScript(前端),这也使得 Vue Naive Admin 成为了市面上少有的 使用 JavaScript 的 Vue3 后台管理模板,而且还算优秀,得到了大量朋友的认可和喜爱。

特性

  • 🆒 使用 Vue3 主流最新技术栈: Vite + Vue3 + Pinia
  • 🍇 使用 原子CSS框架: Unocss,优雅、轻量、易用
  • 🍍 集成 Pinia 状态管理,支持状态持久化
  • 🤹 使用主流的 iconify + unocss 图标方案,支持自定义图标,支持动态渲染
  • 🎨 使用 Naive UI,极致简洁的代码风格和清爽的页面设计,审美在线,主题轻松定制
  • 👏 先进且易于理解的文件结构设计,多个模块之间零耦合,单个业务模块删除不影响其他模块
  • 🚀 扁平化路由设计,每一个组件都可以是一个页面,告别多级路由 KeepAlive 难实现问题
  • 🍒 基于权限动态生成路由,无需额外定义路由,403和404页面可区分,而不是无权限也跳404
  • 🔐 基于Redis集成 无感刷新,用户登录态可控,安全与体验缺一不可
  • ✨ 基于 Naive UI 封装 message 全局工具方法,支持批量提醒,支持跨页面单例模式
  • ⚡️ 基于 Naive UI 封装常用的业务组件,包含Page 组件、CRUD 表格组件及 Modal组件等,简单易用,减少大量重复性工作

极致的性能

性能 性能

2.0 和 1.0 区别

  • 2.0 是基于 1.0 风格从 0 到 1 重新设计的,所以 2.0 看似跟 1.0 很像,但其实代码机构差别还挺大的。
  • 1.0 只提供前端,后端使用 Mock 模拟的,而 2.0 是全栈版,提供真实的后端接口。
  • 2.0 虽然版本高于 1.0,但复杂度却远低于 1.0,虽然 1.0 也很简单。
  • 2.0 的灵活度远高于 1.0,只要你愿意,你可以为每个页面单独定制一个 layout

体验1.0 | template.isme.top

体验2.0 | admin.isme.top

Nestjs 后端

Vue Naive Admin 提供一套后端代码,技术栈使用 Nestjs + TypeOrm + MySql,内置 JWT、RABC及模板所需的一些基础接口。

文档

注:有个比较常见的问题,就是如何添加菜单和修改菜单,由于项目是由后端控制菜单资源的,所以需要对接后端后在资源管理功能对菜单进行增删改,然后在角色管理功能给对应角色进行授权。具体如何对接后端,请参考 项目文档。当然,可能有些菜单你不想通过权限控制,那么你可以在 /src/settings.js 文件添加 basePermissions,只需对齐菜单资源的结构即可,结构可以参照 接口文档

使用这个模板开始你的项目

使用这个模板创建Github仓库.

或者使用 degit 克隆此仓库,这样将没有任何历史提交记录:

npx degit zclzone/vue-naive-admin

鸣谢

本项目开发测试及运行环境由 野草云 提供支持。

版权说明

本项目使用 MIT协议,默认授权给任何人,被授权人可免费地无限制的使用、复制、修改、合并、发布、发行、再许可、售卖本软件拷贝、并有权向被供应人授予同等的权利,但必须满足以下条件:

  • 复制、修改和发行本项目代码需包含原作者的版权及许可信息,包括但不限于文件头注释、协议等

简单来说,作者只想保留版权,没有任何其他限制。

其他已对接本项目的后端项目

  • isme-java-serve: 一个轻量级的Java后端服务,基于SpringBoot、MybatisPlus、SaToken、MapStruct等实现,已对接 Vue Naive Admin 2.0。
  • naive-admin-go: 一个 Go 后端服务,基于 gin、gorm、mysql、jwt和session,已对接 Vue Naive Admin 2.0。
  • isme-java: 一个轻量且完成度高的Java后端服务,基于Springboot 3 + JDK21,层次结构严谨,注释齐全,避免过度封装,代码可读性度高,依赖最简化,上手成本低,已集成 账号管理、权限管理、API鉴权、消息国际化等功能。

联系作者 or 进交流群

https://www.isme.top/contact.html

相关仓库
jeecgboot/JeecgBoot

【低代码 V2.0】AI低代码平台,AI Skills 一句话生成整个系统;一键生成前后端代码甚至整个模块。 AI Skills 一句话画流程、设计表单、生成报表、大屏。内置 AI应用平台涵盖:AI聊天、知识库、流程编排、MCP插件等,兼容主流大模型。引领AI低代码「Skills 生成 → 在线配置 → 代码生成 → 手工合并->AI修改」开发模式,解决 Java 项目 90% 重复工作,提高效率又不失灵活。

JavaMavenApache License 2.0antdactiviti
jeecg.com
47.1k16.1k
dcloudio/uni-app

A cross-platform framework using Vue.js

Objective-CApache License 2.0uni-appvue
uniapp.dcloud.io
41.6k3.7k
NervJS/taro

开放式跨端跨框架解决方案,支持使用 React/Vue 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/

TypeScriptnpmOthertaroreact
docs.taro.zone
37.6k4.9k
vbenjs/vue-vben-admin

A modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. It's fast!

VueMIT Licensevue3vite
vben.pro
33k8.9k
quasarframework/quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time

JavaScriptnpmMIT Licensequasar-frameworkvuejs
quasar.dev
27.2k3.7k
flipped-aurora/gin-vue-admin

🚀Vite+Vue3+Gin拥有AI辅助的基础开发平台,企业级业务AI+开发解决方案,内置mcp辅助服务,内置skills管理,支持TS和JS混用。它集成了JWT鉴权、权限管理、动态路由、显隐可控组件、分页封装、多点登录拦截、资源权限、上传下载、代码生成器、表单生成器和可配置的导入导出等开发必备功能。

GoGo ModulesOthergin-vue-admingin
demo.gin-vue-admin.com
24.9k7.1k
youzan/vant

A lightweight, customizable Vue UI library for mobile web apps.

TypeScriptnpmMIT Licensevuemobile
vant.pro/vant/
24.4k9.4k
vueuse/vueuse

Collection of essential Vue Composition Utilities for Vue 3

TypeScriptnpmMIT Licensevueutility-library
vueuse.org
22.3k2.9k
vueComponent/ant-design-vue

🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜

VueOthervueenterprise
antdv.com
21.6k3.9k
pure-admin/vue-pure-admin

全面ESM+Vue3+Vite+Element-Plus+TypeScript编写的一款后台管理系统(兼容移动端)

VueMIT Licenseelement-plusvite
pure-admin.github.io/vue-pure-admin
20.4k3.8k
zxwk1998/vue-admin-better

🎉 vue admin,vue3 admin,vue3.0 admin,vue后台管理,vue-admin,vue3.0-admin,admin,vue-admin,vue-element-admin,ant-design,vab admin pro,vab admin plus,vue admin plus,vue admin pro

VueMIT Licensevuevue-admin
vuejs-core.cn/shop-vite/
18.9k3.9k
jaywcjlove/reference

面向开发者的技术速查清单(Cheat Sheets)集合,整理常见技术、工具与开发流程,帮助快速查阅关键信息,提高开发效率。

DockerfileMIT Licensejavascriptdocker
jaywcjlove.github.io/reference
15.2k2.2k