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的文件中的匹配项，应用于整个项目的匹配项检查，去除代码检查爆红警告

原文地址：https://blog.csdn.net/qq_41429765/article/details/143034400

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！