自动引入ElMessage，解决ts声明及ESLint报错问题按照Element-plus官网指南，按需引入组件使用其

问题背景

按照Element-plus官网指南，按需引入组件

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

使用其他组件的时候没啥问题，但是在使用ElMessage，ElMessageBox这类作为全局变量在js中的时候，发现没有对应的声明，并且eslint会提示Elmessage is no defined

填坑式

变量及声明引入

正常反应，没有声明和变量，那就直接手动引入就好了

import { ElMessage } from 'element-plus';

确实解决了没有声明和变量的问题

样式引入

这时候可能有的同学就会发现消息框是弹出来了，但是样式好像不太对，是的，这种情况还需要单独引入对应的样式文件

import 'element-plus/theme-chalk/el-message-box.css'

到此也算是解决问题了

但是，有没有更优雅的方式呢，不然每在一个文件中使用ElMessage，都要复制粘贴一下

配置式

解铃还须系铃人，既然是按需引入的问题，那就去求教下按需引入插件unplugin-auto-import吧

在<template>中使用组件按需引入是由unplugin-vue-components/vite负责的

而我们的问题则是在js中的使用，ts报声明问题，es报变量定义问题，这个则是交由unplugin-auto-import/vite负责的

这个得注意，不要找错诉苦的人了

找到源码，翻一下README.md，其实就可以找到解决方案了

简单看个官方例子

没有使用插件

import { ref, computed } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)

使用插件

const count = ref(0)
const doubled = computed(() => count.value * 2)

ts声明问题

一步步来，首先声明问题，其实这里不怪插件，可以看到插件自动生成的auto-imports.d.ts里面其实已经有对应声明了，那为啥ts还是报错呢，那就要找到tsconfig.json，看下include配置项是否包含了auto-imports.d.ts

这里我发现我项目中的配置是

{
  ...
  "include": ["src/**/*.d.ts"]
}

而auto-imports.d.ts在根目录下，这也就说明ts之所以会报错的问题了，没有扫到对应的声明文件，我直接就改成如下了

{
  ...
  "include": ["**/*.d.ts"],
  "exclude": ["node_modules"]
}

eslint变量定义问题

从上面可以看到，unplugin-auto-import/vite插件是生效的，也生成了对应的声明文件，也就表明对应变量也是会被引入的

其实从我们的代码及时报错也能正常运行就可以知道，变量是有正常引入的，那剩下就简单了，只是eslint配置的问题了

README.md继续往下翻，可以看到官方是有对应的eslint配置的，按照以下配置，会自动生成对应的.eslintrc-auto-import.json配置文件

AutoImport({
  // Generate corresponding .eslintrc-auto-import.json file.
  // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
  eslintrc: {
    enabled: false, // Default `false`
    filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
    globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
  },

})

可以看下.eslintrc-auto-import.json中都有啥

{
  "globals": {
     "ElMessage": true,
     "ElMessageBox": true
   }
}

其实就是在eslint中声明下全局变量

最后一步就是将生成的.eslintrc-auto-import.json配置到项目中的.eslint.js中即可

// .eslintrc.js

module.exports = { 
  /* ... */
  extends: [
    // ...
    './.eslintrc-auto-import.json',
  ],
}

到此大功告成，终于把困扰我许久的问题解决了，希望能帮助到大家~