主题
UI 组件库选择
什么是 UI 组件库？
UI 组件库提供现成的按钮、表格、表单等组件，让你不用从零开始写样式，快速搭建漂亮的界面。
🎨 Vue 3 UI 库概览
🌟 推荐使用的库
以下库在本系统中均有 完整实现 支持，可一键生成代码。
Naive UI
| 特性 | 描述 |
|---|---|
| 风格 | 现代、清新、极简 |
| 组件数 | 80+ |
| 亮点 | 类型推导最强，主题定制极其灵活 |
| 官网 | naiveui.com |
特点：
- ✅ TypeScript 支持最好：尤雨溪点赞的类型提示
- ✅ Tree-shaking：按需引入极其方便
- ✅ 样式隔离：CSS-in-JS，不仅无冲突，还能动态调整
- ✅ 设计感：独特的设计语言，不同于传统的企业级风格
适合场景：
- 追求代码质量的 TypeScript 项目
- 现代化的管理后台
- 个人博客 / 作品集
PrimeVue
| 特性 | 描述 |
|---|---|
| 风格 | 多样化 (Material, Tailwind, Bootstrap 等) |
| 组件数 | 90+ (极其丰富) |
| 亮点 | Unstyled 模式 (这是杀手锏)，Pass-Through 属性 |
| 官网 | primevue.org |
特点：
- ✅ Unstyled Mode：可以完全剥离样式，只保留逻辑，配合 Tailwind CSS 使用简直完美
- ✅ 组件全：可能是组件最全的 Vue 库 (图表、编辑器、地图等应有尽有)
- ✅ 模板多：官方提供大量现成的商业模板
适合场景：
- 需要高度自定义样式的项目 (使用 Unstyled + Tailwind)
- 复杂的功能型应用 (由于组件极全)
shadcn-vue
| 特性 | 描述 |
|---|---|
| 风格 | 极简、黑白风、商业风 |
| 本质 | 不是组件库，是组件集 |
| 亮点 | Copy & Paste，代码完全在你手里 |
| 官网 | shadcn-vue.com |
特点：
- ✅ 所有权：组件代码直接复制到你的项目里，你可以任意修改
- ✅ Tailwind 基础：完全基于 Radix Vue 和 Tailwind CSS
- ✅ 目前最火：国内外社区目前最流行的 UI 构建方式
- ✅ 高度可控：没有黑盒，一切皆可改
适合场景：
- 追求极致掌控力的开发者
- SaaS 产品 / 商业网站
- 已经熟练使用 Tailwind CSS 的团队
Ant Design Vue
| 特性 | 描述 |
|---|---|
| 风格 | 企业级、严谨、专业 |
| 组件数 | 60+ |
| 亮点 | 企业级交互规范，阿里系产品背书 |
| 官网 | antdv.com |
特点：
- ✅ 交互规范：不仅是组件，更是设计规范的实现
- ✅ 功能强大：Table 和 Form 组件功能极其强大，适合复杂业务
- ✅ 文档完善：中文文档非常详细
适合场景：
- 大型企业级后台系统
- 银行 / 政府 / 传统行业项目
- 习惯 React Ant Design 的迁移用户
📦 其他流行选择
Element Plus
国内最流行 的 Vue 组件库。
- 优点：社区极其庞大，遇到问题随便搜都有答案。
- 缺点：设计风格偏传统，同质化严重 (很多网站长得都一样)。
- 适用：快速交付的外包项目、传统后台管理。
Vuetify
Material Design 的 Vue 实现。
- 优点：严格遵循 Google 设计规范，移动端体验好。
- 缺点：样式侵入性强，难以修改为非 Material 风格。
- 适用：Google 风格应用、PWA 应用。
Quasar
全能型框架。
- 优点：不仅是 UI 库，还能构建 SPA, SSR, PWA, Mobile App, Electron App。
- 缺点：太庞大，学习曲线陡峭。
- 适用：需要一套代码多端发布 (Web + App + 桌面端)。
📊 对比总结与建议
新手怎么选？
- 如果你懂 Tailwind CSS，强烈推荐 👉 shadcn-vue 或 PrimeVue (Unstyled)。
- 如果你喜欢 TypeScript 且想要开箱即用，强烈推荐 👉 Naive UI。
- 如果你是为了找工作，学习 👉 Element Plus 或 Ant Design Vue。
项目类型怎么选？
| 项目类型 | 推荐 UI 库 |
|---|---|
| SaaS / 现代 Web App | shadcn-vue, PrimeVue |
| 企业内部管理系统 | Ant Design Vue, Naive UI |
| 快速外包交付 | Element Plus |
| 多端应用 (App+Web) | Quasar, Vuetify |