# PrimeVue - Vue UI 组件库

> PrimeVue 是一个功能强大且易于使用的 Vue 3 UI 组件库，提供丰富的组件和主题。

## 官方文档

- [官方网站](https://primevue.org/)
- [GitHub](https://github.com/primefaces/primevue)
- [入门指南](https://primevue.org/gettingstarted/)
- [组件文档](https://primevue.org/components/)

## 安装

```bash
npm install primevue @primevue/themes
# 或
yarn add primevue @primevue/themes
# 或
pnpm add primevue @primevue/themes
```

## 快速开始

```javascript
// main.js
import { createApp } from 'vue'
import PrimeVue from 'primevue/config'
import Aura from '@primevue/themes/aura'
import App from './App.vue'

const app = createApp(App)

app.use(PrimeVue, {
    theme: {
        preset: Aura
    }
})

app.mount('#app')
```

## 主要组件

### Form Components
- [InputText](https://primevue.org/inputtext/)
- [InputNumber](https://primevue.org/inputnumber/)
- [Textarea](https://primevue.org/textarea/)
- [Checkbox](https://primevue.org/checkbox/)
- [RadioButton](https://primevue.org/radiobutton/)
- [Dropdown](https://primevue.org/dropdown/)
- [MultiSelect](https://primevue.org/multiselect/)
- [Calendar](https://primevue.org/calendar/)
- [DatePicker](https://primevue.org/calendar/)
- [ToggleButton](https://primevue.org/togglebutton/)
- [SelectButton](https://primevue.org/selectbutton/)
- [InputSwitch](https://primevue.org/inputswitch/)
- [Slider](https://primevue.org/slider/)
- [Knob](https://primevue.org/knob/)

### Data Components
- [DataTable](https://primevue.org/datatable/)
- [DataView](https://primevue.org/dataview/)
- [Tree](https://primevue.org/tree/)
- [TreeTable](https://primevue.org/treetable/)
- [OrderList](https://primevue.org/orderlist/)
- [PickList](https://primevue.org/picklist/)
- [Timeline](https://primevue.org/timeline/)
- [VirtualScroller](https://primevue.org/virtualscroller/)

### Overlay Components
- [Dialog](https://primevue.org/dialog/)
- [ConfirmDialog](https://primevue.org/confirmdialog/)
- [DynamicDialog](https://primevue.org/dynamicdialog/)
- [OverlayPanel](https://primevue.org/overlaypanel/)
- [Sidebar](https://primevue.org/sidebar/)
- [Tooltip](https://primevue.org/tooltip/)
- [Menu](https://primevue.org/menu/)
- [ContextMenu](https://primevue.org/contextmenu/)
- [Megamenu](https://primevue.org/megamenu/)
- [Menubar](https://primevue.org/menubar/)
- [PanelMenu](https://primevue.org/panelmenu/)
- [TieredMenu](https://primevue.org/tieredmenu/)

### Navigation Components
- [BreadCrumb](https://primevue.org/breadcrumb/)
- [TabMenu](https://primevue.org/tabmenu/)
- [TabView](https://primevue.org/tabview/)
- [TieredMenu](https://primevue.org/tieredmenu/)
- [Dock](https://primevue.org/dock/)

### Messages Components
- [Message](https://primevue.org/message/)
- [Toast](https://primevue.org/toast/)
- [Inplace](https://primevue.org/inplace/)
- [ScrollTop](https://primevue.org/scrolltop/)
- [ProgressBar](https://primevue.org/progressbar/)
- [Messages](https://primevue.org/messages/)

### Media Components
- [Image](https://primevue.org/image/)
- [Galleria](https://primevue.org/galleria/)
- [Carousel](https://primevue.org/carousel/)
- [ImageCompare](https://primevue.org/imagecompare/)

### Panels Components
- [Accordion](https://primevue.org/accordion/)
- [Card](https://primevue.org/card/)
- [Fieldset](https://primevue.org/fieldset/)
- [Panel](https://primevue.org/panel/)
- [Divider](https://primevue.org/divider/)
- [ScrollPanel](https://primevue.org/scrollpanel/)

### Misc Components
- [Badge](https://primevue.org/badge/)
- [BlockUI](https://primevue.org/blockui/)
- [Chip](https://primevue.org/chip/)
- [Inplace](https://primevue.org/inplace/)
- [Skeleton](https://primevue.org/skeleton/)
- [Tag](https://primevue.org/tag/)
- [Avatar](https://primevue.org/avatar/)
- [AvatarGroup](https://primevue.org/avatargroup/)
- [BlockUI](https://primevue.org/blockui/)
- [ProgressBar](https://primevue.org/progressbar/)

## 主题系统

PrimeVue 提供了强大的主题系统，支持多种预设主题和自定义主题：

### 预设主题
```javascript
import Aura from '@primevue/themes/aura'
import Lara from '@primevue/themes/lara'
import Nora from '@primevue/themes/nora'
import Amethyst from '@primevue/themes/amethyst'

app.use(PrimeVue, {
    theme: {
        preset: Aura,
        options: {
            prefix: 'p',
            darkModeSelector: '.dark-mode',
            cssLayer: false
        }
    }
})
```

### 自定义主题
```javascript
app.use(PrimeVue, {
    theme: {
        preset: Aura,
        semantic: {
            primary: {
                50: '{blue.50}',
                100: '{blue.100}',
                // ...
            },
            colorScheme: {
                light: { ... },
                dark: { ... }
            }
        }
    }
})
```

## PrimeFlex

PrimeFlex 是响应式布局系统，用于快速创建布局：

```bash
npm install primeflex
```

## PrimeIcons

图标库：

```bash
npm install primeicons
```

```javascript
import 'primeicons/primeicons.css'

// 使用图标
<i class="pi pi-home"></i>
<i class="pi pi-user"></i>
<i class="pi pi-cog"></i>
```

## Form Validation

与主流表单验证库集成：

- VeeValidate
- Vuelidate
- FormKit

## 无障碍

PrimeVue 完全支持 WCAG 2.0 标准，提供：
- 键盘导航
- ARIA 属性
- 屏幕阅读器支持

## 国际化 (i18n)

```javascript
app.use(PrimeVue, {
    locale: {
        accept: 'Yes',
        reject: 'No',
        // ... 更多翻译
    }
})
```

## 相关工具

- [MCP Server](https://github.com/primefaces/mcp) - AI 集成
- [PrimeVue Designer](https://primevue.org/designer/) - 可视化设计工具
- [PrimeBlocks](https://primeblocks.org/) - 预构建的 UI 模板

## 示例项目

```bash
# 克隆示例项目
git clone https://github.com/primefaces/primevue-quickstart-vite.git
cd primevue-quickstart-vite
npm install
npm run dev
```