526互联

Element-plus按需导入后，组件的正确使用和使用组件时TS报错找不到名称“xxxx”

发布时间 2023-07-05 17:39:31作者: 青柠i

1. 按需导入后使用组件

Element-plus组件库的示例代码中，都import导入了组件，如：

<template>
  <el-button type="primary" @click="openFullScreen2"> As a service </el-button>
</template>

<script lang="ts" setup>
import { ElLoading } from 'element-plus'

const openFullScreen2 = () => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  setTimeout(() => {
    loading.close()
  }, 2000)
}
</script>

很多人就跟着复制了代码，包含了import语句，然后这时候去看界面，发现样式有问题，这是因为我们手动导入了组件，但没手动导入样式。但我们之前已经配置过按需导入了，那为什么没给我们导入样式呢？

那是因为我们自己手动去导入了组件，导致我们之前的webpack配置没有生效。所以解决方案就是，直接注释掉import导入。

如果你项目中使用了TypeScript，那么你就会发现第二个问题了: TS报错找不到名称“ElLoading”。

2. TS报错找不到名称XXX

通过配置按需导入，插件会自动为我们生成一个文件auto-imports.d.ts，这个文件就是组件的TS声明文件，但是项目中的ts配置未加载到这个文件。

解决办法就是所以在tsconfig.json中的include字段中添加auto-imports.d.ts就可以了：

"include": [
    "auto-imports.d.ts",
 ]