Vue组件自动引入插件——unplugin-vue-components 和 unplugin-auto-import

1、安装unplugin-vue-components 和 unplugin-auto-import

npm install -D unplugin-vue-components unplugin-auto-import

2、vite.config.json配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      dts: true, // 生成配置文件，如果是ts项目，通常我们会把声明文件放在根目录/types中，
      // 注意，这个文件夹需要先建好，否则可能导致等下无法往里生成auto-imports.d.ts文件
      imports: ["vue", "vue-router", "pinia"],
    }),
    Components({
      // 配置需要自动注册的组件
      dts: true,
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
});

 

3、配置好后重新启动