vue3项目，Element-plus ElMessage AP

问题重现

1、Element-plus使用了自动按需导入，vite.config.js配置如下：

defineConfig({
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })

2、代码手动导入了API，如下

import { ElMessage } from "element-plus";

ElMessage({
    type: "error",
     message: "请求超时或服务器错误!",
});

此时会出现样式丢失问题。

image.png

解决方案

将上述代码导入import部分的代码去掉，直接调用。

ElMessage({
    type: "error",
     message: "请求超时或服务器错误!",
});

Eslint报错

将ElMessage等都加入到.eslintrc globals字段里面

module.exports = {
 globals: {
   defineEmits: "readonly",
   defineProps: "readonly",
   defineExpose: "readonly",
   withDefaults: "readonly",
   WeixinJSBridge: "readonly",
   ElMessage: "readonly",
   ElMessageBox: "readonly",
   ElLoading: "readonly",
 }
}

element-plus