npx skills add https://github.com/kindy/skills --skill 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
在 中配置:
Guide for configuring PrimeVue with Vue 3 and Vite projects, including auto-import setup and theming.
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.).
Official LLM-optimized documentation: https://primevue.org/llms/pages/introduction.md
Install PrimeVue and themes:
npm install primevue @primeuix/themes
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')
Install auto-import dependencies:
npm install -D unplugin-vue-components @primevue/auto-import-resolver
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
vite.config.tsimport { 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 label="文本" /><InputText v-model="value" /><Dropdown v-model="selected" :options="items" /><DataTable :value="data" /><Dialog v-model:visible="show" /><Card><template #title>标题</template></Card>可用的预设主题:
Aura - 现代、简洁的设计(推荐)Lara - 受 Material 设计启发Nora - 极简主义如上文插件配置所示导入并应用。
每周安装量
179
代码仓库
首次出现
2026年2月1日
安全审计
安装于
opencode161
gemini-cli161
codex158
github-copilot154
kimi-cli147
amp146
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 label="Text" /><InputText v-model="value" /><Dropdown v-model="selected" :options="items" /><DataTable :value="data" /><Dialog v-model:visible="show" /><Card><template #title>Title</template></Card>Available preset themes:
Aura - Modern, clean design (recommended)Lara - Material-inspiredNora - MinimalistImport and apply in plugin configuration as shown above.
Weekly Installs
179
Repository
First Seen
Feb 1, 2026
Security Audits
Installed on
opencode161
gemini-cli161
codex158
github-copilot154
kimi-cli147
amp146
json-render生成式UI框架:AI驱动、多平台JSON渲染,安全构建动态界面
517 周安装