我在一个使用 Vite 创建的 Vue3 项目中,引入 Element Plus 作为 UI 组件库,按照组件的官方文档,安装了 unplugin-vue-components
和 unplugin-auto-import
这两个插件,在 vite.config.ts 中,配置了这两个插件;
但是在组件中调用 Message 组件时,发现 Message 不展示,而且也没有报错出现,调用方式如下:
// 不需要单独引入,比如 import { ElMessage } from "element-plus";
// 已用插件配置了自动导入
ElMessage.success("已复制");
查看了下元素,发现是因为样式没有引入的问题,导致 Message 定位异常,需要在 main.ts 中,引入 Element Plus 的样式表:
// main.ts
import "element-plus/dist/index.css";
这样就可以了。