使用vscode创建Vue2项目的坑创建项目，使用局部elementUI配置，sass的安装以和报错解决

最近学习完vue之后，按照b站一位老师项目实战，从vue2开始到vue3
开局配置的东西很多报错，现在解决错误之后做个总结

使用的软件是vscode

首先已经安装了node，vue的脚手架，以及淘宝镜像cnpm

创建项目： 在vscode里自己创建的没按照老师的来
打开文件夹后新建终端

vue create 项目名

选择vue2

cd 项目名

此时相当于vue2项目已经搭建好了，重要的是elementUI配置和sass

elementUI还好，但是我局部创建使用命令时，会给我报错说没有这个东东，
所以迫不得已我虽然使用了局部的按需求配置，也npm了全局

接上面的cd 项目名之后

cnpm install babel-plugin-component -D

因为后面我新建了文件夹plugins，里面创建了element.js文件按需求使用还是会报错，所以我在此命令之后又继续执行了全局的命令省劲

cnpm i element-ui -S

然后在babel.config.js里放入按需配置的代码

"plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]

报错就是前面的没有加逗号 ,
这是此时的babel.config.js里的完整代码

然后就可以创建文件夹 里面放element.js文件按需求使用了

不过得记得在main.js里引用它

注意文件的路径问题
接下来是sass的下载配置
b站视频里老师让用的是cnpm i sass-loader@7 node-sass@4 -S

我用了之后总是报错，用了它官网的npm install -g sass还是会报Module not found: can’t resolve ‘sass-loader’ in XXX什么的错误

所以我在后面又加了两行代码让loader配置出来运行才堪堪成功，在终端继续运行这些代码就好了

npm install -g sass
npm install sass-loader
npm install node-sass

最后npm run serve应该就能看到效果了，别忘了在Home组件里style设置为<style lang="sass">

最终运行就没问题了 和视频一致

这篇好文章是转载于：学新通技术网