使用 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
    }
});

驗證 #

透過新增像Button這樣的元件來驗證您的設定。每個元件都可以個別匯入和註冊，以便您只包含用於捆綁最佳化的元件。匯入路徑在對應元件的文件中提供。


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，我們建議您探索以下資源，以更深入地了解程式庫。