primevue

PrimeVue 设置与使用

在 Vue 3 和 Vite 项目中配置 PrimeVue 的指南，包括自动导入设置和主题配置。

概述

PrimeVue 是一套完整的 Vue.js UI 组件库，提供丰富的组件、图标和模板。它支持有样式模式（预设样式主题，如 Aura、Lara、Nora）和无样式模式（可使用 Tailwind、Bootstrap 等进行全面样式控制）。

文档

针对 LLM 优化的官方文档：https://primevue.org/llms/pages/introduction.md

安装

安装 PrimeVue 和主题：

npm install primevue @primeuix/themes

插件配置

在 main.ts 中配置带主题的 PrimeVue 插件：

import { createApp } from 'vue'
import PrimeVue from 'primevue/config'
import Aura from '@primeuix/themes/aura'
import App from './App.vue'

const app = createApp(App)
app.use(PrimeVue, {
  theme: {
    preset: Aura  // Available: Aura, Lara, Nora, etc.
  }
})
app.mount('#app')

自动导入设置

安装自动导入依赖：

npm install -D unplugin-vue-components @primevue/auto-import-resolver

在 vite.config.ts 中进行配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { PrimeVueResolver } from '@primevue/auto-import-resolver'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        PrimeVueResolver()
      ]
    })
  ],
})

组件用法

配置自动导入后，无需手动导入即可直接使用组件：

<template>
  <Button label="Click Me" />
  <InputText v-model="value" placeholder="Enter text" />
  <DataTable :value="items" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
// No PrimeVue component imports needed - handled by auto-import

const value = ref('')
const items = ref([])
</script>

常用组件

• Button：<Button label="Text" />
• InputText：<InputText v-model="value" />
• Dropdown：<Dropdown v-model="selected" :options="items" />
• DataTable：<DataTable :value="data" />
• Dialog：<Dialog v-model:visible="show" />
• Card：<Card><template #title>Title</template></Card>

主题

可用的预设主题：

• Aura - 现代、简洁的设计（推荐）
• Lara - 灵感源自 Material
• Nora - 极简主义

按照上文所示，在插件配置中导入并应用主题。

参考资料

• 官方文档：https://primevue.org
• Vite 设置：https://primevue.org/llms/pages/vite.md
• 自动导入：https://primevue.org/llms/pages/autoimport.md