[vue3] element-plus 组件样式与自动导入的UI样式失效

最新推荐文章于 2025-04-15 09:47:45 发布
最新推荐文章于 2025-04-15 09:47:45 发布
阅读量804 收藏 9
点赞数 7
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iOSTianNan/article/details/135258129
版权

vue3+vite+element-plus
配置了自动导入
ElCard等组件, 但样式丢失
在这里插入图片描述

后来发现,在当前的vue组件中,
由于vscode自动导入了 ElCard等组件,
在这里插入图片描述
其与
自动导入的配置冲突
在这里插入图片描述

丢失了样式,
在移除当前vue文件中的
在这里插入图片描述
之后,
UI样式恢复正常

在这里插入图片描述

iOSTianNan
关注
qiankun(微前端) - 解决Element组件库部分样式失效，主应用和子应用分别使用element-ui和element-plus，前端微应用qiankun样式无效污染隔离子应用样式影响其他应用
高级前端工程师
10-29 6413
乾坤qiankun，微前端，vue，qiankun主应用使用vue2+elementui子应用使用vue3+element plus样式失效，子应用样式影响其他应用样式问题，qiankun项目与子应用样式混乱问题，彻底搞定样式污染，前端微应用qiankun样式污染，组件样式部分失效怎么办，互相影响，qiankun子应用中使用element-plus样式失效问题，组件库样式污染混乱，子应用样式影响到主应用怎么办，微前端qiankun子应用样式影响其他应用样式，样式冲突，Vue+qiankun框架样式混乱问题的
Vue3 - Element Plus 全局自动引入图标组件教程，页面使用无需每次 import 即可直接使用 ＜el-icon＞ 组件图标（项目使用 Element Plus 内置图标不用再引入了）
王二红
09-08 7897
vue3elementplus图标组件el-icon，vue3elementplus组件库每次都需要import引入图标才能用吗，vue3elementplus图标组件如何不用引入就能使用，elementplusel-icon如何不引入直接使用，Vue3ElementPlus如何像ElementUI一样简单使用icon，ElementPlus怎么使用el-icon，elementplus图标使用详细教程，vue3全局注册elementplus图标库教程，vue3引用eleme
记录一次Vue3.0引入ElementPlus之后样式不生效的一个大坑
m0_67401761的博客
03-07 4551
事情是这样的，我呢，主要是做后端的，很少碰前端，而且真心不擅长前端，每次碰都特别痛苦。但是最近实在是有点闲，为了能优化一下我前一阵做的一个服务型项目，准备加几个页面实现配置业务参数和查询执行记录之类的功能。所以上网看了看教程，搭了一个VUE3.0的项目，并且准备用ElementUI为VUE3.0推出的ElementPlus作为UI库。 于是我就按照教程，使用VUE/CLI脚手架搭了一个项目，并且配置了vue.config.js的配置文件（这里画个重点要考的！），然后按部就班配置了vue-router和ele
Element Plus组件库使用组件自动导入后样式不生效的问题
qq_45569925的博客
05-15 2060
由此可以看出虽然按照官网上的步骤进行配置了，但是样式并没有因此而生效。错误原因：是因为在使用以下命令进行依赖的安装的时候默认安装的是最新版的。配置完成后，去组件中去测试组件库中的button组件的样式是否生效。的版本安装为0.26.0即可。然后重新运行项目查看结果。然后运行代码查看效果。
Vue3项目引入element-plus后样式丢失问题
最新发布
2302_78400842的博客
04-15 337
本文主要探讨了在Vue3项目中引入Element Plus后遇到的样式丢失问题，分析了可能的原因如全局样式冲突和主题配置错误，并提供了相应的解决方案
日常记录vue3按需引入element-plus的组件而样式不显示的问题
huadu002193的博客
05-11 1318
我是在package.json中直接改然后在控制台执行pnpm install。这时将unplugin-vue-components改为0.26.0就行了。在网上搜索了很多方法未解决，最后突然想到会不会是插件版本问题；我安装时unplugin-auto-import@0.17.5。ELMassage是eslint检测未引入报错，不必理会；虽然没有出现el-button样式，但点击绑定生效；后，运用官方组件仍然显示不出一些样式。npm,yarn语法应该也一样。结果还真的就是版本引起的；插件默认安装最新版；
Element-plus自动导入组件，组件样式失效问题
WDNMde_的博客
03-19 6230
项目里使用自动导入的方法使用element-plus，并且使用script setup编写vue3代码。 组件A的script setup里要用到Elfrom类型，因此必须要引入Elform //组件A import { Elform } from 'element-plus' // elform组件对象 const formRef = ref<InstanceType<typeof ElForm>>() 如果只有一个组件引入了Elform还没有问题， 但是当我在另外一个组件也引.
Element-plus自动导入组件，导致MessageBox组件样式丢失
Gnined的博客
03-13 980
使用Element-plus的MessageBox发现样式不完整，且出现在页面左下角。解决方式：在main.ts入口文件中手动引入MessageBox的样式文件。
Vue3 + Element-Plus + vue-draggable-plus 实现图片拖拽排序和图片上传到阿里云 OSS 父组件实现真正上传（最新保姆级）
一名全栈小白的博客
12-15 840
Vue3 + Element-Plus + vue-draggable-plus 实现图片拖拽排序和图片上传到阿里云 OSS（最新保姆级）
Vue3 element-plus中el-upload 组件limit 限制上传数量无效
News777的博客
08-12 3788
Vue3 element-plus中el-upload 组件limit 限制上传数量无效
Vue3.0 + Ts 项目使用element-plus 自动按需导入 使用v-loading报错
weixin_44209082的博客
04-18 2577
问题展示： 使用v-loading报错 无法找到样式 element-plus/es/components/loading-directive/style/css 解决办法： element-plus版本： "element-plus": "^2.1.9" "unplugin-auto-import": "^0.7.1", "unplugin-vue-components": "^0.19.3" 使用正则表达式，排除loading-directive的样式 exclude: new RegExp(
Element Plus 配置自动按需引入后，手动引入组件，组件样式丢失
szw-yunie的博客
06-25 3153
我使用到了一个 ElTree 组件，把官方实例代码拷过来后，怎么看都跟官网文档上的样式不一样。F12一看，对应的html标签里有类名，但是在style里面却找不到类名对应的样式。于是但是这样做却也是。在网上一顿搜索也没找到解决办法，甚至连样式丢失的原因也找不到，真是见鬼。
自动导入时，Element-plus Message Box组件样式丢失
10-09 658
当使用Element-plus ElMessageBox弹出时，样式丢失。具体表现为弹窗显示在左上角，背景页面均为透明。
Vue3+Element-Plus中ELMessage样式丢失处理
weixin_42202992的博客
02-29 2389
Vu3+Element-Plus项目中,element-plus使用按需引入有时会出现样式失效和在vscode中使用会报错[找不到名称“ElMessage”。ts(2304)]错误处理方法
vue3项目，按需引入Element-plus ElMessage 样式丢失
qq_34082921的博客
12-18 802
将ElMessage等都加入到.eslintrc globals字段里面。将上述代码导入import部分的代码去掉，直接调用。此时会出现样式丢失问题。
解决Element-Plus全局引入却无法使用样式
m0_63359528的博客
11-28 1361
【代码】解决Element-Plus全局引入却无法使用样式。
Vite创建的Vue3项目按需导入(自动导入) Element Plus 样式错误以及编译器报错的问题
Aiden的笔记本
02-27 2923
在Vite构建的Vue3项目中，可以通过官方推荐的自动导入的方法，方便地使用Element Plus，这样不需要在每一个Vue中手动import，而且基于按需导入的自动导入打包时效率也会更高。但是，不当的使用可能会导致ElMessage，ElNotification 等组件的样式丢失，不经过很好的配置，可能会出现虽然正确使用，但编译器报错的问题。这篇文章主要讲解如何正确引入Element Plus，以及解决上述两个常见的问题。
Vue3.0+Element plus项目中组件样式丢失
做笔记/记录遇到的前端bug
01-07 2792
解决Element Plus 组件样式丢失，组件显示位置不对。ElMessage 、el-drawer等组件显示位置不正确等问题。
若依（ruoyi）框架，在VScode修改模块后出现导入“element-plus“ 库报错
Ryoukaxi的博客
07-22 600
报错：[vite] Internal server error: Failed to resolve import "element-plus/es/locale" from
vue3 element-plus登录容器失效
01-05
### Vue3 中 Element Plus 登录容器失效解决方案 在处理 Vue3 和 Element Plus 组合开发过程中遇到的登录容器失效问题时，可以遵循以下方法来排查并解决问题。 #### 1. 检查依赖版本兼容性 确保 `vue`、`typescript` 及 `element-plus` 的版本相互匹配。不同版本之间可能存在不兼容的情况，这可能会导致样式或功能上的异常[^1]。 #### 2. 正确导入 CSS 文件 有时忘记加载框架自带的主题样式文件也会造成页面显示错误。对于基于 Vite 构建工具的新项目，在 `main.ts` 或相应的入口文件中加入如下代码： ```javascript import &#39;element-plus/dist/index.css&#39; ``` 这段代码用于全局注册 Element Plus 提供的基础样式表单[^2]。 #### 3. 验证组件按需加载配置 如果启用了 Webpack 的按需加载插件（如 babel-plugin-component），则需要注意是否正确设置了路径映射关系以及是否遗漏了某些必要的模块引入操作。特别是当只部分引入所需组件而非全部时更应小心验证。 #### 4. 图标库集成注意事项 针对图标无法正常渲染的问题，确认已经按照官方文档说明的方式进行了设置，并且检查浏览器控制台是否存在资源请求失败的日志提示。另外还需留意是否有其他第三方扩展影响到了 SVG 渲染效果[^3]。 通过以上几个方面逐一排查，通常能够有效定位并修复登录界面或其他任何由 Element Plus 所构建出来的 UI 容器所发生的故障现象。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值