事情是这样的，我呢，主要是做后端的，很少碰前端，而且真心不擅长前端，每次碰都特别痛苦。但是最近实在是有点闲，为了能优化一下我前一阵做的一个服务型项目，准备加几个页面实现配置业务参数和查询执行记录之类的功能。所以上网看了看教程，搭了一个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";`, // }, // }, // },重启项目，成功啦啊啊啊啊！ 做个小记录！没有系统学过前端就上手真的好容易踩坑！等我把优化的这些前端差不多上手了再来补一篇博客来记录一下！
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |