vue3中使用element-plus的组件，编辑器检查警告爆红找不到名称相关的element组件

1.首先是使用elementPlus的自动导入

在vite.config.js中配置

import { defineConfig } from "vite";
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";

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      //安装两行后你会发现在组件中不用再导入ref，reactive等
      imports: ["vue"],
      dts:"./auto-imports.d.ts",
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ]
})

按照以上配置完之后，当在代码中使用elementplus相关组件的时候，会在根目录下自动生成

auto-imports.d.ts    components.d.ts  这两个文件

2.在组件中使用elementplus组件爆红警告

解决方式：

在tsconfig.json中，增加标红框文件配置，目的就是将根目录下包含.d.ts的文件中的匹配项，应用于整个项目的匹配项检查，去除代码检查爆红警告