🚀 作者主页： 有来技术
🔥 开源项目： youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template
🌺 仓库主页： GitCode︱ Gitee ︱ Github
💖 欢迎点赞 👍 收藏 ⭐评论 📝 如有错误敬请纠正！

继Element Plus版本大获好评后，有来开源组织重磅推出NaiveUI版本！为Vue3生态带来更多选择！

✨ 项目亮点

🎯 项目简介

vue3-naiveui-admin 是基于 Vue 3 + Vite 7 + TypeScript + Naive UI 构建的极简开箱即用企业级后台管理前端模板。

🔥 重磅消息：这是有来技术为 youlai-boot 后端项目专门打造的 NaiveUI 前端版本！

与我们已经成熟的 vue3-element-admin 形成完美互补，为开发者提供双UI框架选择：

• Element Plus 版本 —— 成熟稳定，功能丰富
• Naive UI 版本 —— 轻量美观，现代化设计
  
  

🌟 技术栈优势

前端技术栈

• 🎨 UI框架：Naive UI 2.42.0 - Vue3原生组件库，设计现代优雅
• ⚡ 构建工具：Vite 7.1.7 - 极速冷启动，HMR热更新
• 📝 开发语言：TypeScript 5.9.2 - 类型安全，开发高效
• 🎯 CSS框架：UnoCSS 66.5.1 - 原子化CSS，按需生成
• 📦 状态管理：Pinia + 持久化 - 轻量级状态管理

后端配套

• ☕ Java版本：youlai-boot - Spring Boot + MyBatis Plus
• 🟢 Node版本：youlai-nest - Nest.js + TypeORM

🚀 核心功能特色

🎪 组件封装

基于 Naive UI 深度定制，提升开发效率：

• 📋 FormPro 组件 - 智能表单生成，配置驱动
• 📊 TablePro 组件 - 高性能数据表格，功能完备
• 🖼️ DrawerForm - 抽屉式表单，空间利用高效
• 💬 ModalForm - 弹窗表单，交互体验佳

🎨 界面设计

• 🌈 主题适配：浅色/深色/自动模式，完美适配用户习惯
• 🎭 自定义主题：支持主题色自定义，打造专属视觉风格
• 📱 响应式布局：完美适配桌面端和移动端
• ✨ 页面过渡：丰富的动画效果，提升用户体验

🔐 权限管理

• 🛡️ 动态路由：根据用户权限动态生成菜单
• 👆 按钮权限：精细化控制页面操作权限
• 👥 角色管理：灵活的角色权限分配
• 📊 数据权限：行级数据访问控制

🏗️ 系统功能

完整的后台管理功能模块：

• 👤 用户管理 - 用户信息维护与权限分配
• 🎭 角色管理 - 角色创建与权限绑定
• 📋 菜单管理 - 动态菜单配置
• 🏢 部门管理 - 组织架构管理
• 📖 字典管理 - 系统配置项管理
  

🌍 有来生态系统

🏗️ 生态完整性

vue3-naiveui-admin 作为有来技术生态的重要组成部分，与现有项目形成完美协同：

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

🔄 版本对应关系

• 标准版：vue3-element-admin - 功能完整的管理系统
• 精简版：vue3-element-template - 轻量级开发模板
• JS版本：vue3-element-admin-js - JavaScript版本
• NaiveUI版：vue3-naiveui-admin - 全新UI框架选择

📊 代码质量保障

🛠️ 开发规范

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

📈 性能优化

• ⚡ 按需加载：路由懒加载，组件异步导入
• 🗂️ 页面缓存：KeepAlive 支持多级页面缓存
• 📦 构建优化：Vite 生态，构建速度提升300%

🎯 在线体验

🌐 快速预览

• 📱 在线预览：https://vue.youlai.tech/naiveui
• 📚 使用文档：https://www.youlai.tech/naiveui-docs

📥 源码获取

• 🦄 Gitee仓库：https://gitee.com/zimo493/vue3-naiveui-admin
• 🐱 GitHub仓库：https://github.com/zimo493/vue3-naiveui-admin

🚀 快速开始

📋 环境要求

Node.js ^20.19.0 或 >=22.12.0
pnpm >= 8.0.0

⚡ 一键启动

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

🎯 适用场景

🏢 企业应用

• 后台管理系统
• 数据可视化平台
• 内容管理系统
• 业务流程管理

👨‍💻 开发者

• Vue3技术栈学习
• 企业级项目快速搭建
• 组件库二次开发
• 前端架构设计参考

🌈 未来规划

🗺️ 发展路线图

• 📱 移动端适配 - 完善移动端体验
• 🔌 插件生态 - 丰富第三方插件
• 🎨 主题市场 - 提供更多主题选择
• 📊 数据大屏 - 集成可视化大屏
• 🤖 AI集成 - 引入AI辅助功能

🎉 结语

vue3-naiveui-admin 不仅仅是一个前端模板，更是有来技术生态系统的重要扩展。它为开发者提供了Element Plus之外的另一种优雅选择，让youlai-boot后端服务拥有了更丰富的前端生态支持。

🌟 如果这个项目对你有帮助，请不要吝惜你的Star！让更多开发者发现这个优秀的项目！