自动导入

通过自动导入和摇树优化按需加载 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.vuejs.ac.cn/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);

示例 #

在playground中可以找到使用自动导入的 PrimeVue 的完整示例。