unplugin-auto-import配置

unplugin-auto-import 是一个非常实用的插件，它可以帮助我们自动引入模块。下面是一份 unplugin-auto-import 的配置示例：

// vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      // 需要自动引入的模块列表
      imports: [
        'vue',
        'vuex',
        'vue-router',
        {
          // 带有命名空间的模块
          libraryName: 'element-plus',
          // 模块的默认导出
          resolveComponent: name => `element-plus/lib/${name}`,
          // 模块中的具名导出
          resolveStyle: name => `element-plus/lib/theme-chalk/${name}.css`,
        },
      ],
    }),
  ],
});

在上面的代码中，我们使用了 unplugin-auto-import 的 `AutoImport` 插件，并且在插件的配置中指定了需要自动引入的模块列表。其中，`imports` 属性接受一个数组，数组中可以包含字符串或对象。如果是字符串，则表示需要自动引入的模块名；如果是对象，则可以指定模块的命名空间、默认导出和具名导出等信息。

在配置完成后，我们可以在代码中直接使用需要自动引入的模块，unplugin-auto-import 会自动帮我们引入相关的模块。比如，在 Vue 组件中使用 Element Plus 的 `el-button` 组件：

<template>
  <el-button>Click me</el-button>
</template>

<script>
export default {
  name: 'MyComponent',
  methods: {
    handleClick() {
      // ...
    },
  },
};
</script>

<style>
/* unplugin-auto-import 会自动引入 element-plus/lib/theme-chalk/el-button.css */
</style>

除了在 Vite 中使用，unplugin-auto-import 还支持在其他构建工具中使用，比如 webpack、Rollup 等。