比npm更快的yarn,轻松上手!

一、前言

在前端方面,我们会使用些包管理器来操作项目中需要的包,一般最常见的为npm

同时,由于公司的技术需要,在这里记录一下本人学习yarn

二、认识

在CSDN看到这样几句话:前端各种包管理工具简述

  • npm是名声最广的前端包管理器,为Node.js自带

  • cnpm是npm的阿里版,用的是阿里的源

  • yarn的出现是想取代npm包管理工具,特点是快速安全可靠

  • tyarnyarn的阿里版,用的是阿里的源

yarn是一个JavaScript包管理器,速度很快。

三、使用

1. 安装

1.1 通过npm包管理器来安装yarn

npm install yarn -g

或者说可以通过官网(中文文档)提供的备选方案,下载安装程序。

1.2 检测是否安装成功,查看版本

yarn --version

1.3 进入指定的目录,初始化一个新项目

yarn init

1.4 添加项目需要的包

yarn add [package]
//yarn add jquery

执行完命令后,在node_modules包中,就可以看到所添加的jquery,默认是最新版本。

当然,也可以一次性添加多个包,写法为yarn add [package1] [package2] ,如这样yarn add jquery bootstrap

如需要,还可以添加指定版本的包,只需要在包后面添加@+版本号。如yarn add jquery@2.1.4

1.5 升级依赖包

yarn upgrade --latest [package]
yarn upgrade [package]@3.0.0  #升级到指定版本

1.6 移除依赖包

yarn remove [package]
yarn remove [package1] [package2] #删除多个项目

当然,也可以删除多个包,就如第二条那样。

四、配置

使用yarn设置阿里源

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

查看结果

yarn config get registry

结果显示:

https://registry.npm.taobao.org/

升级全局Vue CLi包

yarn global upgrade --latest @vue/cli

五、实例

Vue.js的官方文档中,也有介绍使用npmyarn来安装项目的步骤。Vue3:Vue CLI参考这里

实例1

使用vue-cli构建Vue3项目

1,安装Vue CLi,版本需要在4.5.0以上(截止目前,版本为@vue/cli 5.0.4)

yarn global add @vue/cli

2.如果Vue CLi的版本过低,则需要升级

yarn global upgrade --latest @vue/cli

使用vue -V来查看Vue CLi的版本

3.进入存放目录,创建项目

vue create [project]

4.添加依赖

yarn add xxx
#yarn add vue-router

5.进入项目,启动项目

cd [project]
yarn serve

实例2

这是一个创建Vue3项目的实例,使用vite来构建项目,它很快!!

1.Vite构建的Vue3项目

yarn create vite <project-name> --template vue
# yarn create @vitejs/app [project]

2.进入目录,并安装相关依赖

cd vue3_demo
yarn 

yarn,安装项目的全部依赖

3.启动项目

yarn dev

使用vite构建的项目运行速度很快,但目前使用它的公司不多,或许它在将来会很耀眼,但目前还需要时间来沉淀。

六、最后

这有很好的教程:yarn的全部使用集结教程,以及官方所提供的常用命令。

posted @ 2022-05-19 23:11  十五十五  阅读(195)  评论(0编辑  收藏  举报