PrimeVue 安装与配置指南：Vue 3 UI 组件库完整教程（含自动导入与主题）

primevue by kindy/skills

220 周安装量

GitHub

安装命令

npx skills add https://github.com/kindy/skills --skill primevue

UI组件库 Vue 前端架构

🇨🇳中文介绍

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  // 可用选项：Aura, Lara, Nora 等
  }
})
app.mount('#app')

自动导入设置

安装自动导入依赖：

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

在中配置：

🇺🇸English

PrimeVue Setup and Usage

Guide for configuring PrimeVue with Vue 3 and Vite projects, including auto-import setup and theming.

Overview

PrimeVue is a complete UI suite for Vue.js with rich components, icons, and templates. It supports both styled mode (pre-skinned themes like Aura, Lara, Nora) and unstyled mode (full styling control with Tailwind, Bootstrap, etc.).

Documentation

Official LLM-optimized documentation: https://primevue.org/llms/pages/introduction.md

Installation

Install PrimeVue and themes:

npm install primevue @primeuix/themes

Plugin Configuration

Configure PrimeVue plugin with theme in main.ts:

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')

Auto Import Setup

Install auto-import dependencies:

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

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

网页可访问性（A11y）开发指南：实现WCAG合规、键盘导航与屏幕阅读器支持

12,600 周安装

UI组件模式实战指南：构建可复用React组件库与设计系统

10,700 周安装

Nuxt 4 模式指南：SSR、混合渲染、路由规则与数据获取最佳实践

733 周安装

Vue Pinia单元测试指南：组件、组合函数与状态管理测试最佳实践

686 周安装

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="点击我" />
  <InputText v-model="value" placeholder="输入文本" />
  <DataTable :value="items" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 无需导入 PrimeVue 组件 - 由自动导入处理

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

Button : <Button label="文本" />
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>标题</template></Card>

可用的预设主题：

Aura - 现代、简洁的设计（推荐）
Lara - 受 Material 设计启发
Nora - 极简主义

如上文插件配置所示导入并应用。

Configure in 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()
      ]
    })
  ],
})

With auto-import configured, use components directly without manual imports:

<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>

Available preset themes:

Aura - Modern, clean design (recommended)
Lara - Material-inspired
Nora - Minimalist

Import and apply in plugin configuration as shown above.

json-render生成式UI框架：AI驱动、多平台JSON渲染，安全构建动态界面

517 周安装

PrimeVue 安装与配置指南：Vue 3 UI 组件库完整教程（含自动导入与主题）

🇨🇳中文介绍

PrimeVue 安装与使用指南

概述

文档

安装

插件配置

自动导入设置

🇺🇸English

PrimeVue Setup and Usage

Overview

Documentation

Installation

Plugin Configuration

Auto Import Setup

相关 Skills

组件使用

常用组件

主题

参考

Component Usage

Common Components

Theming

References

最新 Skills