使用Vite安装PrimeVue

在Vite项目中设置PrimeVue。

PrimeVue可以通过npm仓库下载使用。


# 使用npm
npm install primevue @primeuix/themes

# 使用yarn
yarn add primevue @primeuix/themes

# 使用pnpm
pnpm add primevue @primeuix/themes

必须将 PrimeVue 插件作为应用插件安装,以便设置默认的 配置。 该插件十分轻量,仅用于配置目的。


import { createApp } from 'vue';
import PrimeVue from 'primevue/config';

const app = createApp(App);
app.use(PrimeVue);

配置 PrimeVue 以使用类似于 Aura 的主题。


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

const app = createApp(App);
app.use(PrimeVue, {
    theme: {
        preset: Aura
    }
});

通过添加一个组件(例如 Button)来验证你的设置。 每个组件都可以单独导入和注册,这样你只需包含实际使用的部分,从而优化打包体积。 对应组件的文档中提供了导入路径。


import Button from "primevue/button"

const app = createApp(App);
app.component('Button', Button);

我们为 Vue 生态系统中的常用选项创建了各种示例。访问 primevue-examples 仓库以获取更多示例,包括 vite-quickstartvite-ts-quickstart

观看 Çağatay Çivici 的简短视频教程,学习如何使用 Create-Vue 以样式模式设置 PrimeVue。

欢迎来到 Prime UI 生态系统!当你成功运行 PrimeVue 后,我们推荐你探索以下资源,以便更深入地了解这个库。

Build Faster Design Better
490+ ready to use UI blocks crafted with PrimeVue and Tailwind CSS.
Learn More
Theme Designer