# Yarn 的安装和使用

# 1. yarn 的下载和安装

yarn 是 npm 的竞品，它们俩之间的关系就如同 maven 和 gradle 一样。

抛开具体细节和更多特性不谈，yarn 至少在下载包的速度上面，要比 npm 强很多。

不过，有意思的是，yarn 要通过 npm 来安装（也不知道 yarn 和 npm 谁更尴尬），就如同我们要通过 IE 浏览器来下载 google chrome 浏览器来代替 IE 浏览器一样。

通过 npm 安装 yarn：

npm install -g yarn

安装完毕后，可直接执行 yarn -v 命令查看 yarn 的版本，以验证是否安装成功。

需要注意的是，在通过 npm 安装了 yarn 之后：

你的 yarn 是安装在了 npm 的全局仓库中。

你的 C:\Users<用户名>\AppData\Roaming\npm\node_modules 下面就『多』出来一个 yarn 文件夹。
站在“上帝视角”，你的电脑上现在有两个包管理工具，它俩都能为你所用。

你要注意你当前用的是谁，你想用谁。
npm 和 yarn 两个包管理工具，它俩有各自自己的本地全局仓库。

npm 的本地全局仓库在 %homepath%\AppData\Roaming\npm\node_modules

yarn 的本地仓库在 %homepath%\AppData\Local\Yarn\Data\global\node_modules

# 2. yarn 的配置

和 npm 一样，yarn 在下载包时也是要连接到网络上的中央仓库，而官方的中央仓库国内的下载速度感人，我需要将配置改为连接淘宝的仓库。

查看 yarn 的中央仓库网址：
```
yarn config get registry
```

修改 yarn 的中央仓库网址：

yarn config set registry http://registry.npm.taobao.org/

查看 yarn 全局安装的命令的源码路径和二进制执行文件路径：
```
yarn global dir
yarn global bin
```
注意，和 npm 一样，这两个路径和局部安装无关。

这里，对于你电脑上同时存在的 yarn 和 npm，它们在现在包的时候，它们是从同一个中央仓库下载，下载下来的包自然就是一摸一样的，无任何差别。

# 3. 命令总结

npm install -g yarn

通过 npm 安装它的竞争对手 yarn 。这个包（yarn）被安装在了 npm 的本地全局仓库。
yarn -v

查看包管理器 yarn 的版本信息
yarn config get registry

查看包管理器 yarn 的网络仓库网址。
yarn config set registry http://registry.npm.taobao.org/

将包管理器 yarn 的网络仓库网址指定为淘宝镜像。
yarn global add xxx

通过 yarn 全局安装 xxx 包。这个包被安装在了 yarn 的本地全局仓库。
yarn global remove xxx

通过 yarn 卸载全局安装的 xxx 包。在 yarn 的本地全局仓库的 xxx 包会被移除。
yarn add xxx

通过 yarn 局部安装 xxx 包。
yarn remove xxx

通过 yarn 局部卸载 xxx 包。

# 4. 安装、卸载、配环境

yarn 安装 @vue/cli

我们使用过 npm 安装 @vue/cli（安装路径在 %homepath%\AppData\Roaming\npm\node_modules），自然，我们也可以使用 yarn 全局安装 @vue/cli ：
```
yarn global add @vue/cli
```
@vue/cli 被安装在了 yarn 的本地全局仓库中：

%homepath%\AppData\Local\Yarn\Data\global\node_modules 。
卸载 npm 的 @vue/cli

注意，此时你的电脑上实际上是有 2 个 @vue/cli ：

npm 的本地全局仓库中有一个（以前装的）；
yarn 的本地全局仓库中也有一个（刚刚装的）。

虽然可以，但是为了避免不必要的混淆和麻烦，我们可以『将 npm 安装的 @vue/cli 卸载掉』：

npm uninstall -g @vue/cli

配置 yarn 环境变量

不过，有可能你的电脑发现不了 yarn 安装的 @vue/cli，你可以通过以下命令验证：
```
vue --version
```
如果没有出现版本信息（命令行输出 vue 命令未找到），那么就说明你的电脑没发现 yarn 安装的 @vue/cli 。

这是因为 PATH 环境变量没有配置，导致系统/命令行找不到 @vue/cli 的 vue 命令在哪里。

你可以通过上面的 yarn global bin 到一个路径，它是 yarn 全局安装的软件的可以执行程序位置，形如:
```
C:\Users\<用户名>\AppData\Local\Yarn\bin
```
将它追加到你的环境变量 PATH 中去。配置完后，稳妥起见，重启电脑。

# 5. vue-cli 创建的项目使用 Yarn

虽然现在你的 @vue/cli 是通过 yarn 安装的（npm 安装的那个已经被你卸载了），但是 @vue/cli 『默认使用 NPM 作为包管理器』。

TIP

如何知道我的 vue-cli 是使用 NPM 作为包管理器的？

当你使用 vue create xxx 创建 vue 项目结束后看到如下信息，那么毫无疑问 vue-cli 使用的就是 NPM：

successfully created project xxx.
Get started with the following commands:
$ cd temp-vue-cli<br>
$ npm run serve 看这里，看这里，看这里

如果有需要，你可以通过设置，去提前『告知』@vue/cli 创建的 vue 项目使用 Yarn 作为包管理器。

无论是通过 npm 还是通过 Yarn 全局安装 @vue/cli，@vue/cli 会在你的用户的『家目录』下创建一个名为 .vuerc 的文件（一开始可能没有，在你第一次执行 vue create 命令后就会被 @vue/cli 创建）。在 Windows 环境中，这个文件在 C:\Users\<用户名> 目录下，即，%homepath% 目录。

用编辑器打开这个文件，你会发现其内容是一个 JSON 格式数据：

{
  "useTaobaoRegistry": false,
  "packageManager": "npm"   // 看这里，看这里，看这里。
  "latestVersion": "4.4.6",
  "lastChecked": 1596095820450,
}

很显然 packageManager 项就是用来设置 @vue/cli 的包管理器的，将它从 npm 改为 yarn 。

另外，这个配置文件中还有一项 useTaobaoRegistry ，表示的是『是否使用淘宝镜像源』，你也可以将这一项改为 true 启用淘宝镜像源，以加快包的下载速度。

修改完成后，使用 vue create xxx 创建 vue 项目，创建过程结束后，你看到的将是：

successfully created project xxx.
Get started with the following commands:

$ cd temp-vue-cli
$ yarn serve

注意，这里的设置对命令行有效，而对 IDEA『无影响』，因为在 IDEA 里通过 @vue/cli 创建 vue 项目，它们读取的配置文件是 IDEA 自己的配置文件，并不是这里的这个配置文件，是另外单独的配置。

# 6. IDEA 中配置使用 yarn

要在 IDEA 使用 yarn 作为包管理器，有 1 处配置需要改动：全局 settings 。

全局 settings 中去修改 IDEA 默认使用的包管理器，从 npm 改为 yarn 。

yarn-idea-1

这里要指向 yarn 的路径。注意，yarn 是通过 npm 安装的，所以这里的 yarn 的路径是 npm 的本地全局仓库下的 yarn 文件夹。即

%homepath%\AppData\Roaming\npm\node_modules\yarn

← NPM 安装 Vue 脚手架 IDEA IntelliJ 的安装和常见设置 →