目录
- 一、前言
- 二、认识
- 三、使用
- 1. 安装
- 四、配置
- 五、实例
- 实例1
- 实例2
- 六、最后
一、前言
在前端方面,我们会使用些包管理器来操作项目中需要的包,一般最常见的为npm
。
同时,由于公司的技术需要,在这里记录一下本人学习yarn
。
二、认识
在CSDN看到这样几句话:前端各种包管理工具简述
npm
是名声最广的前端包管理器,为Node.js
自带cnpm
是npm的阿里版,用的是阿里的源yarn
的出现是想取代npm
包管理工具,特点是快速安全可靠tyarn
是yarn
的阿里版,用的是阿里的源
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的官方文档中,也有介绍使用npm
,yarn
来安装项目的步骤。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的全部使用集结教程,以及官方所提供的常用命令。