如何使用 unplugin-auto-import 和 unplugin-vue-components 自动导入组件、ui库、单文件组件

自动导入Vue 、Vue-route、pinia、AntdV、Vant

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from '@vant/auto-import-resolver'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import GetLoginTemplate from './src/utils/GetLoginTemplate'
import { AntDesignIconResolver,AntDesignApiResolver } from './src/utils/AntDesignResolver'

export default defineConfig({
  server: {
    host: '',
    proxy: {
      '/api': 'http://localhost:4000'
    }
  },
  plugins: [
    vue(),
    vueJsx(),
    vueDevTools(),
    AutoImport({
      dirs: ['@/utils/Composable/**'],
      eslintrc: {
        enabled: true,
        filepath: '.eslintrc-auto-import.json',
        globalsPropValue: true
      },
      imports: ['vue', 'vue-router', 'pinia'],
      include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/],
      dts: 'auto-imports.d.ts',
      resolvers: [
        VantResolver(),
        AntDesignVueResolver({ importStyle: 'less' }),
        AntDesignApiResolver()
      ]
    }),
    Components({
      dirs: ['./src/components/**', './src/utils/Composable/**', './src/Layout/**'],
      extensions: ['vue'],
      exclude: [/node_modules/, /\.git/, /\.nuxt/, /dist/, /public/, /test/, /mocks/],
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/, /\.ts$/, /\.js$/, /\.jsx$/, /\.tsx$/],
      deep: true,
      dts: 'components.d.ts',
      resolvers: [
        VantResolver(),
        AntDesignVueResolver({ importStyle: 'less' }),
        AntDesignIconResolver()
      ]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/assets/variables.scss";'
      }
    }
  }
})

自动导入icon库和antd api 组件的 Resolver

import icons from '@ant-design/icons-vue'
import { type Resolver } from 'unplugin-auto-import/types'


const hooks = Object.keys(icons)

function resolveHooks(name: string) {
  if (!hooks) return
  if (!hooks.includes(name)) return

  return {
    name,
    from: '@ant-design/icons-vue'
  }
}

const AntDesignIconResolver: () => Resolver = () => {
  return (name: string) => {
    return resolveHooks(name)
  }
}

const AntDesignApiResolver = () => {
  const api = ['message', 'notification', 'modal', 'confirm']
  return (name: string) => {
    if (!api.includes(name)) return
    return {
      name,
      from: 'ant-design-vue'
    }
  }
}

export { AntDesignIconResolver, AntDesignApiResolver }