最近学习完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">
在这里插入图片描述
最终运行就没问题了 和视频一致
在这里插入图片描述

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐