在使用 element-plus 组件库的时候，因为我是 Vite 下进行按需引入的，然后发现在使用 ElMessage 组件时无法弹出消息框，也没有错误、警告日志打印；翻了半天 element-plus 按需引入文档，也没有额外提示说需要如何做。搜索了半天发现关键字 CSS ，难道按需引入的时候还需要引入 CSS 吗？文档也没有说啊；然后我就在文档中全局搜索了 CSS 关键字，发现在手动导入时有个提示（应该是导入提示，但是这个缩进就很迷，让人分不清到底是什么鬼）
问题解决
按图中的提示 如果使用 unplugin-element-plus 并且只使用组件 API，你需要手动导入样式。 而像ElMessage、MessageBox 、Notification 这些都是使用组件 API 的，所以都需要导入；
导入方法一：
哪里需要就在哪里导入 import 'element-plus/es/components/message/style/css'
如在有弹出的页面，都需要一个个引入方法
import 'element-plus/es/components/message/style/css'
import {ElMessage} from "element-plus";
导入方法二：
每次导入太麻烦，我们可以直接在 Vue 的根文件中 如 App.vue 中引入 import 'element-plus/es/components/message/style/css' 这样就只需要引入一次，后续在任何地方都可以使用。
文章评论