关于黑马程序员2023Vue视频P170 elmessage不生效

最新推荐文章于 2025-06-06 10:05:39 发布

Score666

最新推荐文章于 2025-06-06 10:05:39 发布

阅读量312

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue前端学习文章标签： vue

本文链接：https://blog.youkuaiyun.com/Score666/article/details/132609651

7 篇文章

订阅专栏

文章讲述了在使用VSCode时遇到Element-Plus组件自动import导致样式问题的解决方法，包括在main.js手动引入样式和调整ESLint规则以声明全局变量，以避免ElMessage等组件报错。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决办法1：是因为vscode的自动补齐，敲了ElMessage会自动import

因为之前设置的是按需引入中的自动导入

并没有引入css样式

所以需要在main.js中引入样式

import 'element-plus/theme-chalk/index.css'

解决办法2：其实不应该让vscode自动补全import { ElMessage } from 'element-plus'

一导入就可能自动导入就不生效了

所以把import删掉

就会变成这样：

其实已经可以用了，但因为之前配置的eslint规则不知道引入，所以有报错

所以应该在eslintrc 中声明全局变量名, 解决 ElMessage 报错问题

module.exports = {
  ...
  globals: {
    ElMessage: 'readonly',
    ElMessageBox: 'readonly',
    ElLoading: 'readonly'
    // 以后需要什么再添加上去
  }
}