使用 Vite 安装 PrimeVue

在 Vite 项目中设置 PrimeVue。

下载 #

PrimeVue 可在 npm 注册表上下载。


# Using npm
npm install primevue @primevue/themes

# Using yarn
yarn add primevue @primevue/themes

# Using pnpm
pnpm add primevue @primevue/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 '@primevue/themes/aura';

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

验证 #

通过添加诸如按钮之类的组件来验证您的设置。每个组件都可以单独导入和注册，以便您仅包含用于捆绑优化的内容。导入路径可在相应组件的文档中找到。


import Button from "primevue/button"

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

示例 #

我们为 Vue 生态系统中流行的选项创建了各种示例。访问 primevue-examples 存储库以获取更多示例，包括 vite-quickstart 和 vite-ts-quickstart。

视频 #

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

后续步骤 #

欢迎来到 Prime UI 生态系统！一旦您启动并运行了 PrimeVue，我们建议您探索以下资源，以更深入地了解该库。