Bootstrap

按需引入 ElMessage,没有样式且类型检查失败

在这里插入图片描述

ElMessage 弹框没有样式

问题描述

Element-plus 在使用 ElMessage 消息弹框的时候没有样式,按照官方的按需加载的方式引入的

import {
    ElMessage } from "element-plus";

ElMessage.success('修改成功!')

解决方案

只要是按需导入了,就不要去手动导入。要不然样式无法生效。

  • 当然如果手动导入了模块,再去全局导入所有 element-plus 样式,这也能生效。但这已经不是按需导入了
// 去掉引用
// import { ElMessage } from 'element-plus'

ElMessage.success('修改成功!')

ts 类型检查失败

问题描述

如果不手动 import 导入,会发现 ElMessage 会类型检查失败。会报找不到名称ElMessage这样的一个错误 :
image.png
image.png

虽然开发环境可以忍着红线不去管它,可以正常使用,但打包构建会失败。因为构建时会有严格的类型检查 vue-tsc。因此这个问题必须解决。

;