vue3按需导入element-plus后使用ElMessage报错或样式丢失

在vue项目中已经自动导入element-plus，但是直接使用ElMessage时编译会报错。

async function userLogin(): Promise<void> {
	const response = await login(data.ruleForm)
	if(response.code === 200) {
		router.push('/home')
	} else {
		ElMessage.error(res.data.msg)
	}
}

编译报错：

提示进行修改：

根据提示的解决方案，在前面导入ElMessage，这样会出现样式丢失：

样式丢失的原因是：手动导入和按需导入冲突了。
如果去掉import会报错，说明是eslint的问题。

解决方案：去掉import，修改eslint配置

// vue.config.js中修改unplugin-auto-import的配置
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      AutoImport({
        // AutoImport 增加 eslintrc ，自动生成 .eslintrc-auto-import.json 文件
        eslintrc: {
          enabled: true
        },
        resolvers: [ElementPlusResolver()],
      }),
      // ...
    ]
  }
})

// .eslintrc.js的extends中增加'./.eslintrc-auto-import.json'，rules中添加'no-undef': 0

module.exports = {
  // ...
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    './.eslintrc-auto-import.json'
  ],
  rules: [
      // ...
      'no-undef': 0
  ]
}

// tsconfig.json的include中增加"./auto-imports.d.ts"
{
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "./auto-imports.d.ts"
, "src/mock/user.js"  ],
}

最终效果：