使用 Vite 安装 PrimeVue

在 Vite 项目中设置 PrimeVue。

下载 #

PrimeVue 可在 npm Registry 上下载。


# Using npm
npm install primevue

# Using yarn
yarn add primevue

# Using pnpm
pnpm add primevue

插件 #

PrimeVue 插件需要作为应用程序插件安装以设置默认配置。该插件很轻量级，只设置配置对象，不会影响您的应用程序。PrimeVue 具有两种样式模式：样式模式和无样式模式。如果您是初学者，请从样式模式开始。

样式模式 #

样式模式提供预先设置皮肤的组件，默认主题是 Aura，以翡翠色作为主色。有关详细信息，请参阅样式模式文档。

安装 @primevue/themes 附加包，因为主题默认情况下不包含在 PrimeVue 中。


# Using npm
npm install @primevue/themes

# Using yarn
yarn add @primevue/themes

# Using pnpm
pnpm add @primevue/themes

配置 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
    }
});

无样式模式 #

在无样式模式下，组件不包含任何 CSS，因此您需要自己对组件进行样式设置，这在您在 PrimeVue 之上构建自己的 UI 库时尤其有用。访问无样式模式文档以获取更多信息和示例。


import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);

app.use(PrimeVue, {
    unstyled: true
});

用法 #

每个组件都可以单独导入和注册，这样您就可以只捆绑您使用的组件。导入路径在相应组件的文档中提供。如果您更喜欢使用 tree-shaking 支持自动导入组件，请查看自动导入指南。


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。