自動導入

具有自動導入和搖樹優化的按需 PrimeVue 元件。

概述 #

PrimeVue 元件需要個別導入和設定。在下一節中，我們將使用自動導入來清理程式碼。


import { createApp } from "vue";
import PrimeVue from "primevue/config";
import InputText from 'primevue/inputtext';
import Button from 'primevue/button';
import App from './App.vue'
const app = createApp(App);

app.use(PrimeVue);
app.component('InputText', InputText);
app.component('Button', Button);

Unplugin #

unplugin-vue-components 函式庫可以在 @primevue/auto-import-resolver 的協助下自動導入和註冊 PrimeVue 元件。首先，將套件安裝為開發依賴項。


npm i unplugin-vue-components -D
npm i @primevue/auto-import-resolver -D

下一步是在 vite.config 中使用 Components 外掛程式新增 PrimeVueResolver。


import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite';
import {PrimeVueResolver} from '@primevue/auto-import-resolver';

// https://vite.dev.org.tw/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        PrimeVueResolver()
      ]
    })]
})

就是這樣，現在可以將初始化程式碼重構如下。如需命名空間等設定，請參閱官方文件。


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

app.use(PrimeVue);

範例 #

在遊樂場中，可以找到使用 PrimeVue 和自動導入的完整範例。