element plus 使用ElMessage无法正确显示

一、问题

在使用element-plus时遇到的一个问题，element plus 使用ElMessage无法正确显示
一是显示在整个页面组件的最底部，二是没有样式

错误显示

正确显示

二、原因

之前以为是样式优先级问题或者组件层级问题，后来发现是因为使用element-plus自动按需导入时，使用的elememt-plus组件和样式无需导入可以直接使用，但是VS会自动导入element-plus组件 (2025/4/22)，如此导致图片中的Elmessage出现在底部且没有样式

三、解决一

1.将组件中的引入删除，直接使用 ElMessage

  // 提示
  ElMessage.success('登录成功')

2.如果还不行，使用eslint-disable-next-line no-undef忽略下一行

// 提示
  // eslint-disable-next-line no-undef
  ElMessage.success('登录成功')

四、解决二

在 eslint.config.js 文件中的 globals 增加ElMessage: ‘readonly’， ESLint会认为ElMessage是一个只读的全局变量，可以解决ElMessage在JavaScript中作为全局变量使用时的问题

 globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),

  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ElMessage: 'readonly',
        ElMessageBox: 'readonly',
        ElLoading: 'readonly'
      }
    }
  },

ps

纯属个人想法，困扰已久，记录一下，有问题感谢指正
有额外的类似问题和解决方法，欢迎贴上