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

最新推荐文章于 2024-08-22 14:25:13 发布
最新推荐文章于 2024-08-22 14:25:13 发布
阅读量635 收藏 9
点赞数 7
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iOSTianNan/article/details/135258129
版权

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

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

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

在这里插入图片描述

iOSTianNan
关注
Vue3 - Element Plus 全局自动引入图标组件教程，页面使用无需每次 import 即可直接使用 ＜el-icon＞ 组件图标（项目使用 Element Plus 内置图标不用再引入了）
王佳斌
09-08 6522
vue3 element plus 图标组件 el-icon，vue3 element plus组件库每次都需要import引入图标才能用吗，vue3 element plus图标组件如何不用引入就能使用，element plus el-icon如何不引入直接使用，Vue3 Element Plus如何像Element UI一样简单使用icon，Element Plus怎么使用el-icon，element plus图标使用详细教程，vue3全局注册element plus图标库教程，vue3引用eleme
记录一次Vue3.0引入ElementPlus之后样式不生效的一个大坑
m0_67401761的博客
03-07 4218
事情是这样的，我呢，主要是做后端的，很少碰前端，而且真心不擅长前端，每次碰都特别痛苦。但是最近实在是有点闲，为了能优化一下我前一阵做的一个服务型项目，准备加几个页面实现配置业务参数和查询执行记录之类的功能。所以上网看了看教程，搭了一个VUE3.0的项目，并且准备用ElementUI为VUE3.0推出的ElementPlus作为UI库。 于是我就按照教程，使用VUE/CLI脚手架搭了一个项目，并且配置了vue.config.js的配置文件（这里画个重点要考的！），然后按部就班配置了vue-router和ele
Element Plus组件库使用组件自动导入后样式不生效的问题
qq_45569925的博客
05-15 1186
由此可以看出虽然按照官网上的步骤进行配置了，但是样式并没有因此而生效。错误原因：是因为在使用以下命令进行依赖的安装的时候默认安装的是最新版的。配置完成后，去组件中去测试组件库中的button组件的样式是否生效。的版本安装为0.26.0即可。然后重新运行项目查看结果。然后运行代码查看效果。
【vue3】常见问题04：解决全局引入ElementPlus时类型提示丢失的问题
最新发布
elanbom的博客
08-22 468
这个接口定义了在 Vue 组件中可以全局使用的组件，如 Element Plus 中的各种组件 (ElButton, ElInput, ElTable 等等);这些组件通过 typeof import(“element-plus/es”)[“ElButton”] 这种方式引入，确保了类型安全，即在使用这些组件时，TypeScript 能够进行正确的类型检查。
Element Plus 配置自动按需引入后，手动引入组件，组件样式丢失
szw-yunie的博客
06-25 2555
我使用到了一个 ElTree 组件，把官方实例代码拷过来后，怎么看都跟官网文档上的样式不一样。F12一看，对应的html标签里有类名，但是在style里面却找不到类名对应的样式。于是但是这样做却也是。在网上一顿搜索也没找到解决办法，甚至连样式丢失的原因也找不到，真是见鬼。
Element-plus自动导入组件，导致MessageBox组件样式丢失
Gnined的博客
03-13 750
使用Element-plus的MessageBox发现样式不完整，且出现在页面左下角。解决方式：在main.ts入口文件中手动引入MessageBox的样式文件。
自动导入时，Element-plus Message Box组件样式丢失
10-09 543
当使用Element-plus ElMessageBox弹出时，样式丢失。具体表现为弹窗显示在左上角，背景页面均为透明。
日常记录vue3按需引入element-plus的组件而样式不显示的问题
huadu002193的博客
05-11 857
我是在package.json中直接改然后在控制台执行pnpm install。这时将unplugin-vue-components改为0.26.0就行了。在网上搜索了很多方法未解决，最后突然想到会不会是插件版本问题；我安装时unplugin-auto-import@0.17.5。ELMassage是eslint检测未引入报错，不必理会；虽然没有出现el-button样式，但点击绑定生效；后，运用官方组件仍然显示不出一些样式。npm,yarn语法应该也一样。结果还真的就是版本引起的；插件默认安装最新版；
Vue3.0 + Ts 项目使用element-plus 自动按需导入 使用v-loading报错
weixin_44209082的博客
04-18 2413
问题展示： 使用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(
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
10-14
在Vue和Element-UI的开发过程中，我们常常遇到表单重置的问题，特别是当使用`resetFields()`方法时发现表单并未如预期那样被重置。这个问题通常涉及到多个方面，让我们逐一探讨解决方法。 首先，确保在HTML模板中...
Vue3 element-plus中el-upload 组件limit 限制上传数量无效
News777的博客
08-12 3542
Vue3 element-plus中el-upload 组件limit 限制上传数量无效
Vue3 - Element Plus 上传组件 before-upload 钩子函数不触发，解决 el-upload 上传文件后 before-upload 不执行也没反应（别的都行，就这个不行）
王佳斌
12-16 5601
vue3，element plus，el-upload，Upload上传组件，element plus上传组件的before-upload钩子函数不触发怎么办，为什么before-upload不生效也不报错，vue3 element plus 上传组件before-upload不触发，before-upload一直不生效怎么办，vue3 Element plus上传组件beforeUpload上传前限制失效问题怎么解决，钩子函数不好使不执行咋办，el-upload上传文件之前的钩子函数一直不触发不执行，Vu
Vue3+Element-Plus中ELMessage样式丢失处理
weixin_42202992的博客
02-29 1607
Vu3+Element-Plus项目中,element-plus使用按需引入有时会出现样式失效和在vscode中使用会报错[找不到名称“ElMessage”。ts(2304)]错误处理方法
vue3项目，按需引入Element-plus ElMessage 样式丢失
qq_34082921的博客
12-18 716
将ElMessage等都加入到.eslintrc globals字段里面。将上述代码导入import部分的代码去掉，直接调用。此时会出现样式丢失问题。
解决Element-Plus全局引入却无法使用样式
m0_63359528的博客
11-28 1079
【代码】解决Element-Plus全局引入却无法使用样式。
Vue3.0+Element plus项目中组件样式丢失
做笔记/记录遇到的前端bug
01-07 2552
解决Element Plus 组件样式丢失，组件显示位置不对。ElMessage 、el-drawer等组件显示位置不正确等问题。
element-plus的messageBox样式丢失，main.js重新引入el样式后设置的主题色失效
qq_41421033的博客
05-23 697
main.js重新引入element样式，本人项目使用自动按需引入的方法使用element+ui，并结合使用scss。引入后发现定制的主题色被新引入的样式覆盖了,下面修改了引入的文件, 完美解决。
vue3使用vant组件样式失效解决
weixin_43952634的博客
04-13 625
【代码】vue3使用vant组件样式失效解决。
Element-plus自动导入组件，组件样式失效问题
WDNMde_的博客
03-19 6045
项目里使用自动导入的方法使用element-plus，并且使用script setup编写vue3代码。 组件A的script setup里要用到Elfrom类型，因此必须要引入Elform //组件A import { Elform } from 'element-plus' // elform组件对象 const formRef = ref<InstanceType<typeof ElForm>>() 如果只有一个组件引入了Elform还没有问题， 但是当我在另外一个组件也引.
解决Vue中Element-UI组件使用常见问题
Element-UI是基于Vue.js的一个流行前端组件库，提供了丰富的UI组件，如表格、按钮、下拉菜单等，用于快速构建美观的企业级前端应用。在实际使用过程中，可能会遇到一些问题，以下是一些常见的问题和解决方法： 1. *...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值