从0开始创建一个vue3的项目之二安装项目基础依赖

110 阅读2分钟

前言

嗨~友友们,上一节我们已经完成了项目的基础创建了,这一节我们来给项目添加基础依赖。

第一步:安装ui框架

npm i element-ui -S

第二步:安装css预编译处理:scss

在安装scss之前我们来简单了解一下sass的变更,在早些时间前端开发使用的sass都是基于node-sass,但是node-sass底层依赖libsass,导致很多用户安装困难,尤其是 windows 用户,它强制用户在windows环境中必须安装python2Visual Studio才能编译成功。 为了解决这个问题,本文推荐使用dart-sass作为scss的使用版本。并且sass官方已经将dart-sass作为未来的主方向了。出处参考链接

下面详细对比新版与旧版的安装过程:

方式一:新版(推荐使用)

npm install sass -D

方式二:旧版

npm install sass-loader node-sass --save-dev

在安装时发生了node-sass安装失败的报错,如下:

image.png

然后我凭借多年老前端的经验,一眼就想起了报错的原因,因为访问国外资源请求超时导致依赖安装失败。那么怎么解决呢,首先我们来安装一个镜像源管理工具nrm,通过阿里提供的淘宝镜像进行代理下载依赖包。

先来安装一下nrm(补充说明:这里我是切换为cnpm的源安装成功的)

npm install -g nrm

通过nrm -v指令来检查一下是否安装成功,好的,报错了。

image.png

通过网友们的集思广益,也就是“百度问答”,网友们提议“以管理员身份运行”,试过,仍然不得其解。

思考三秒,又再次以我多年老前端的经验,一眼就想起了报错的原因,在上一节中,我们提到创建项目时发生报错,于是我们使用了命令,回顾如下: image.png

于是我又通过npm config edit将路径改回去了,示例如下:

image.png

重新安装一下nrm,就成功了,鼓掌鼓掌,撒花撒花~输入nrm ls就能看到如下图:

image.png

在看到这个taobao源的时候,有一丝意外,跟我想象中出现了出入,再次通过度娘和众位网友小伙伴的集思,发现:参考链接

image.png

这里额外补充一下nrm的介绍及使用:

介绍:

NPM registry manager,nrm can help you easy and fast switch between different npm registries, now include: npmcnpmtaobaonj(nodejitsu)

npm 源管理器,可以帮助你快速切换不同的npm源

使用:详细参考链接

第三步:安装路由

npm install vue-router --save