按需使用的 PrimeVue 组件，支持自动导入和 tree-shaking。
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-vue-components 库可以在 @primevue/auto-import-resolver 的帮助下自动导入和注册 PrimeVue 组件。首先将这些包作为开发依赖项安装。
npm i unplugin-vue-components -D
npm i @primevue/auto-import-resolver -D
下一步是使用 Components 插件在 vite.config 中添加 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://vitejs.dev/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 自动导入的完整示例可在演练场中查看。