I love you three thousand

# 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 之后：

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

    你的 C:\Users<用户名>\AppData\Roaming\npm\node_modules 下面就『多』出来一个 yarn 文件夹。

  2. 站在“上帝视角”，你的电脑上现在有两个包管理工具，它俩都能为你所用。

    你要注意你当前用的是谁，你想用谁。

  3. 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. 安装、卸载、配环境

  1. 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 。

  2. 卸载 npm 的 @vue/cli

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

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

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

npm uninstall -g @vue/cli

  1. 配置 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

← IDEA IntelliJ 的安装和常见设置 →