相信关于按需引入大家应该都会了，不论是官网还是百度一大堆教程
我这边也是参照https://github.com/youlaitech/vue3-element-admin的写法去写的

这里复述一遍，作为笔记：
首先安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

yarn add -D unplugin-vue-components unplugin-auto-import

// 自动导入配置   vite.config.ts

import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";

plugins: [
  AutoImport({
    // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
    imports: ["vue"],
    eslintrc: {
      enabled: true, // 是否自动生成 eslint 规则，建议生成之后设置 false 
      filepath: "./.eslintrc-auto-import.json", // 指定自动导入函数 eslint 规则的文件
    },
    dts: path.resolve(pathSrc, "types", "auto-imports.d.ts"), // 指定自动导入函数TS类型声明文件路径
  }),
  Components({
    dts: path.resolve(pathSrc, "types", "components.d.ts"), // 指定自动导入组件TS类型声明文件路径
  }),
]


// .eslintrc.cjs 自动函数eslint规则引入

"extends": [
    "./.eslintrc-auto-import.json"
],


// tsconfig.json - 自动导入TS类型声明文件引入
教程是
{
  "include": ["src/**/*.d.ts"] // 关键点
}
这么点，看不起谁呢？-----------我直接爬你墙头全部覆盖0.0
{
    "compilerOptions": {
      "target": "esnext",
      "useDefineForClassFields": true,
      "module": "esnext",
      "moduleResolution": "node",
      "strict": true,
      "jsx": "preserve",
      "sourceMap": true,
      "resolveJsonModule": true,
      "esModuleInterop": true,
      "lib": ["esnext", "dom"],
      "baseUrl": ".",
      "allowJs": true,
      "paths": {
        "@/*": ["src/*"]
      },
      "types": ["vite/client", "unplugin-icons/types/vue"],
      "skipLibCheck": true /* Skip type checking all .d.ts files. */,
      "allowSyntheticDefaultImports": true /* 允许默认导入 */,
      "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */
    },
    // 这里多了个src/types/**/*.d.ts，因为我是放在src/types/目录下，不加的话默认根目录
    "include": ["src/**/*.ts", "src/**/*.vue", "src/types/**/*.d.ts","**/*.d.ts",],
    "exclude": ["node_modules", "dist", "**/*.js"],
    "references": [{ "path": "./tsconfig.node.json" }]
  }

安装 Element Plus
npm install element-plus

安装自动导入 Icon 依赖
npm i -D unplugin-icons

// 我直接上干货，我的完整配置经测试的没问题的版本，只多不少

import vue from '@vitejs/plugin-vue'

import { UserConfig, ConfigEnv, loadEnv, defineConfig } from 'vite'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

import path from 'path'
const pathSrc = path.resolve(__dirname, 'src')

// https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
    const env = loadEnv(mode, process.cwd())
    return {
        resolve: {
            alias: {
                '@': pathSrc
            }
        },
        css: {
            // CSS 预处理器
            preprocessorOptions: {
                //define global scss variable
                scss: {
                    javascriptEnabled: true,
                    additionalData: `@use "@/styles/variables.scss" as *;`
                }
            }
        },
        server: {
            host: '0.0.0.0',
            port: Number(env.VITE_APP_PORT),
            open: true, // 运行是否自动打开浏览器
            proxy: {
                // 反向代理解决跨域
                [env.VITE_APP_BASE_API]: {
                    target: 'http://vapi.youlai.tech', // 线上接口地址
                    // target: 'http://localhost:8989',  // 本地接口地址 , 后端工程仓库地址：https://gitee.com/youlaiorg/youlai-boot
                    changeOrigin: true,
                    rewrite: (path) => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '') // 替换 /dev-api 为 target 接口地址
                }
            }
        },
        plugins: [
            vue(),
            AutoImport({
                // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
                imports: ['vue', '@vueuse/core'],
                eslintrc: {
                    enabled: true,
                    filepath: './.eslintrc-auto-import.json',
                    globalsPropValue: true
                },
                resolvers: [
                    // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
                    ElementPlusResolver(),
                    IconsResolver({})
                ],
                vueTemplate: true,
                // 配置文件生成位置(false:关闭自动生成)
                // dts: false,
                dts: path.resolve(pathSrc, 'types', 'auto-imports.d.ts') // 指定自动导入函数TS类型声明文件路径
            }),
            Components({
                resolvers: [
                    // 自动导入 Element Plus 组件
                    ElementPlusResolver(),
                    // 自动导入图标组件
                    IconsResolver({
                        // @iconify-json/ep 是 Element Plus 的图标库
                        enabledCollections: ['ep']
                    })
                ],
                dirs: ['src/**/components'],
                // 配置文件生成位置(false:关闭自动生成)
                dts:false,
                // dts: path.resolve(pathSrc, 'types', 'components.d.ts') // 指定自动导入组件TS类型声明文件路径
            }),
            Icons({
                // 自动安装图标库
                autoInstall: true
            }),
            createSvgIconsPlugin({
                // 指定需要缓存的图标文件夹
                iconDirs: [path.resolve(pathSrc, 'assets/icons')],
                // 指定symbolId格式
                symbolId: 'icon-[dir]-[name]'
            })
        ]
    }
})