事情是这样的,我呢,主要是做后端的,很少碰前端,而且真心不擅长前端,每次碰都特别痛苦。但是最近实在是有点闲,为了能优化一下我前一阵做的一个服务型项目,准备加几个页面实现配置业务参数和查询执行记录之类的功能。所以上网看了看教程,搭了一个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里面的配置,我试了一下,居然真的可以!!!
这里说一下我的vue.config.js
文件是从搭建项目的某个教程中扒过来的,因为上面有不少注释,所以用了那个,结果没想到在这里给自己挖了个大坑!向下面这样去掉css相关的配置样式就正常了!
// css: {
// // 启用 CSS modules
// requireModuleExtension: false,
// // 是否使用css分离插件
// extract: true,
// // 开启 CSS source maps,一般不建议开启
// sourceMap: false,
// // css预设器配置项
// loaderOptions: {
// sass: {
// prependData: `@import "@/styles/global.scss";`,
// },
// },
// },
重启项目,成功啦啊啊啊啊!
做个小记录!没有系统学过前端就上手真的好容易踩坑!等我把优化的这些前端差不多上手了再来补一篇博客来记录一下!