Skip to content

Vue3 NaiveUI Admin 介绍

项目介绍 📖

🚀 vue3-naiveui-admin 是一个基于 Vue3ViteTypeScriptNaive UI 构建的 极简开箱即用 的企业级后台管理前端模板。

生态系统

项目说明技术栈
vue3-naiveui-admin🎯 当前项目Vue3 + NaiveUI + TypeScript
youlai-boot☕ Java 后端Spring Boot + MyBatis Plus
youlai-nest🟢 Node 后端Nest.js + TypeORM

多版本支持

💡 Element Plus 版本同步更新

版本说明仓库地址
标准版功能完整的管理系统vue3-element-admin
精简版轻量级开发模板vue3-element-template
JS 版JavaScript 版本vue3-element-admin-js

在线体验 👀

代码仓库 ⭐

核心特性 🎈

技术栈

  • 前端框架: Vue 3.5 + Vite 7 + TypeScript + TSX
  • UI 组件库: Naive UI - 简洁、现代的 Vue 3 组件库
  • CSS 框架: UnoCSS - 原子化 CSS 引擎
  • 状态管理: Pinia + 持久化插件 - 替代 Vuex
  • 网络请求: Axios - 完整的 TypeScript 封装

组件封装

  • 表单组件: 基于 Naive UI 二次封装的 FormPro 组件
  • 表格组件: 基于 FormPro 封装的 TablePro 组件
  • 弹窗组件: DrawerFormModalForm - 提升开发效率
  • 页面缓存: KeepAlive 支持多级缓存

界面设计

  • 主题适配: 浅色/深色/自动模式,保持 Naive UI 原生风格
  • 自定义主题: 支持主题色自定义和页面过渡动效
  • 响应式布局: 完美适配桌面端和移动端

代码规范

  • 代码约束: ESLint + Prettier + Stylelint + EditorConfig
  • Git 规范: Husky + Lint-staged + Commitlint + Commitizen
  • 提交格式: 使用 cz-git 规范化 Git 提交信息

浏览器支持 💻

  • 本地开发 推荐使用 Chrome 最新版 浏览器

  • 生产环境 支持现代浏览器,不支持 IE。

IEEdgeFirefoxChromeSafari
IE EdgeFirefoxChromeSafari
❌ 不支持✅ 支持✅ 支持✅ 支持✅ 支持

贡献者

页面历史

基于 MIT 许可发布