歡迎,來到第三天,我們繼續推進吧!
The first step is as good as half over.
第一步是最關鍵的一步。
進入官網 primvue官網,進入安裝指南頁面,
這次是 Nuxt專案,所以點選 Nuxt
引入 primevue 3.53.0版本
pnpm add primevue@3.53.0
pnpm add -D nuxt-primevue
專案如果認不得 pnpm
npm install -g pnpm
引入 primeVue
export default defineNuxtConfig({
modules: [
'nuxt-primevue'
],
primevue: {
/* Configuration */
}
})
2.引入主題 Theme
終端機
pnpm add @primevue/themes
nuxt.config 設定
primevue: {
usePrimeVue: true
}
4.自動註冊元件。預設為 true
primevue: {
autoImport: true
}
5. prefix
在組件和指令中使用前綴來添加註冊前綴,有助於避免名稱衝突並提高代碼的可讀性。
primevue: {
components: {
prefix: "p-",
},
}
primevue: {
components: {
include: [
"button",
"dataTable",
"column",
]
},
}
npm install primeflex
plugins: [{ src: "~/plugins/primevue.js", ssr: false }],
import { defineNuxtPlugin } from "#app";
import PrimeVue from "primevue/config";
import "primevue/resources/themes/saga-blue/theme.css"; // 主題
import "primevue/resources/primevue.min.css"; // 核心 CSS
import "primeicons/primeicons.css"; // 圖標
import "primeflex/primeflex.css"; //
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(PrimeVue);
});
設定完成後,我們開始進入 PrimeVue 世界吧~