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

事情是这样的，我呢，主要是做后端的，很少碰前端，而且真心不擅长前端，每次碰都特别痛苦。但是最近实在是有点闲，为了能优化一下我前一阵做的一个服务型项目，准备加几个页面实现配置业务参数和查询执行记录之类的功能。所以上网看了看教程，搭了一个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";`,
  //     },
  //   },
  // },

重启项目，成功啦啊啊啊啊！

做个小记录！没有系统学过前端就上手真的好容易踩坑！等我把优化的这些前端差不多上手了再来补一篇博客来记录一下！