理解按需自动导入 unplugin-auto-import & unplugin-vue-components

// 引入必要的插件和组件
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
 
// 导出配置对象
export default defineConfig({
  plugins: [
    // 自动导入组件
    Components({
      // 配置自动导入的库
      resolvers: [
        AutoImport.Resolve.resolveComponents({
          'element-plus': {
            resolveStyle: name => {
              return `element-plus/theme-chalk/${name}.css`
            },
          },
        }),
      ],
    }),
    // 自动导入Vue相关API
    AutoImport({
      imports: ['vue', 'vue-router'],
      // 配置自动导入库
      resolvers: [
        AutoImport.Resolve.resolveVue({
          'element-plus': {
            resolveComponent: name => {
              return `element-plus/lib/${name}`
            },
          },
        }),
      ],
    }),
  ],
})

这个代码示例展示了如何在Vite项目中配置和使用unplugin-auto-import和unplugin-vue-components插件。它演示了如何自动导入Vue相关API和自动导入组件库（例如Element Plus）的组件。通过这个示例，开发者可以学习如何利用这些插件来简化代码并提高开发效率。