使用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">
最终运行就没问题了 和视频一致
更多推荐
所有评论(0)