项目介绍 📖
🚀 vue3-naiveui-admin 是一个基于 Vue3、Vite、TypeScript 和 Naive 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 |
在线体验 👀
代码仓库 ⭐
- Gitee: https://gitee.com/zimo493/vue3-naiveui-admin
- GitHub: https://github.com/zimo493/vue3-naiveui-admin
核心特性 🎈
技术栈
- 前端框架:
Vue 3.5+Vite 7+TypeScript+TSX - UI 组件库:
Naive UI- 简洁、现代的 Vue 3 组件库 - CSS 框架:
UnoCSS- 原子化 CSS 引擎 - 状态管理:
Pinia+ 持久化插件 - 替代 Vuex - 网络请求:
Axios- 完整的 TypeScript 封装
组件封装
- 表单组件: 基于
Naive UI二次封装的FormPro组件 - 表格组件: 基于
FormPro封装的TablePro组件 - 弹窗组件:
DrawerForm、ModalForm- 提升开发效率 - 页面缓存:
KeepAlive支持多级缓存
界面设计
- 主题适配: 浅色/深色/自动模式,保持
Naive UI原生风格 - 自定义主题: 支持主题色自定义和页面过渡动效
- 响应式布局: 完美适配桌面端和移动端
代码规范
- 代码约束:
ESLint+Prettier+Stylelint+EditorConfig - Git 规范:
Husky+Lint-staged+Commitlint+Commitizen - 提交格式: 使用
cz-git规范化 Git 提交信息
浏览器支持 💻
本地开发 推荐使用 Chrome 最新版 浏览器
生产环境 支持现代浏览器,不支持 IE。
| IE | Edge | Firefox | Chrome | Safari |
|---|---|---|---|---|
| ❌ 不支持 | ✅ 支持 | ✅ 支持 | ✅ 支持 | ✅ 支持 |
nuyoah