前言
嗨~友友们,上一节我们已经完成了项目的基础创建了,这一节我们来给项目添加基础依赖。
第一步:安装ui框架
npm i element-ui -S
第二步:安装css预编译处理:scss
在安装scss之前我们来简单了解一下sass的变更,在早些时间前端开发使用的sass都是基于node-sass,但是node-sass底层依赖libsass,导致很多用户安装困难,尤其是 windows 用户,它强制用户在windows环境中必须安装python2和Visual Studio才能编译成功。
为了解决这个问题,本文推荐使用dart-sass作为scss的使用版本。并且sass官方已经将dart-sass作为未来的主方向了。出处参考链接
下面详细对比新版与旧版的安装过程:
方式一:新版(推荐使用)
npm install sass -D
方式二:旧版
npm install sass-loader node-sass --save-dev
在安装时发生了node-sass安装失败的报错,如下:
然后我凭借多年老前端的经验,一眼就想起了报错的原因,因为访问国外资源请求超时导致依赖安装失败。那么怎么解决呢,首先我们来安装一个镜像源管理工具nrm,通过阿里提供的淘宝镜像进行代理下载依赖包。
先来安装一下nrm(补充说明:这里我是切换为cnpm的源安装成功的)
npm install -g nrm
通过nrm -v指令来检查一下是否安装成功,好的,报错了。
通过网友们的集思广益,也就是“百度问答”,网友们提议“以管理员身份运行”,试过,仍然不得其解。
思考三秒,又再次以我多年老前端的经验,一眼就想起了报错的原因,在上一节中,我们提到创建项目时发生报错,于是我们使用了命令,回顾如下:
于是我又通过npm config edit将路径改回去了,示例如下:
重新安装一下nrm,就成功了,鼓掌鼓掌,撒花撒花~输入nrm ls就能看到如下图:
在看到这个taobao源的时候,有一丝意外,跟我想象中出现了出入,再次通过度娘和众位网友小伙伴的集思,发现:参考链接
这里额外补充一下nrm的介绍及使用:
介绍:
NPM registry manager,nrm can help you easy and fast switch between different npm registries, now include: npm, cnpm, taobao, nj(nodejitsu)
npm 源管理器,可以帮助你快速切换不同的npm源
使用:详细参考链接
第三步:安装路由
npm install vue-router --save