记录一次Vue3.0引入ElementPlus之后样式不生效的一个大坑

最新推荐文章于 2024-08-07 11:04:20 发布

m0_67401761

最新推荐文章于 2024-08-07 11:04:20 发布

阅读量4.1k

点赞数 1

分类专栏：前端 html 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_67401761/article/details/123323805

版权

本文记录了一位后端开发者在使用Vue3.0和ElementPlus时遇到的样式不生效问题。在按照教程配置项目并引入ElementPlus后，组件样式显示异常。经过排查和参考其他文章，发现是由于在配置文件中的一项CSS相关配置导致的。移除该配置后，样式恢复正常。作者提醒未系统学习前端的开发者，此类问题在实践中很常见，且容易踩坑。

摘要由CSDN通过智能技术生成

事情是这样的，我呢，主要是做后端的，很少碰前端，而且真心不擅长前端，每次碰都特别痛苦。但是最近实在是有点闲，为了能优化一下我前一阵做的一个服务型项目，准备加几个页面实现配置业务参数和查询执行记录之类的功能。所以上网看了看教程，搭了一个VUE3.0的项目，并且准备用ElementUI为VUE3.0推出的ElementPlus作为UI库。
于是我就按照教程，使用VUE/CLI脚手架搭了一个项目，并且配置了vue.config.js的配置文件（这里画个重点要考的！），然后按部就班配置了vue-router和element-plus，一切都很顺利，router跳转很成功，ElementPlus引入也没有问题。
但是最终，问题出在了使用上。我从ElementPlus的官方网站copy了一段组件的示例代码，可是样式怎么都不对，上网查了好多，main.js中样式文件也引入了，vue.use(ElementPlus)也加了，可是样式一直都像下面那样！
在这里插入图片描述
怎么都排查不到原因，最后查来查去，翻到了这篇文章→VUE 引入element ui 样式不生效解决
文章里面说去掉config里面的配置，我试了一下，