vue使用到的工具node npm cnpm pnpm yarn管理
vue前端框架搭建项目使用到的工具
1、node.js
nodejs是JavaScript的一个运行环境，使得我们在前端写的js代码能够在服务端运行。
相较于传统的web开发，前端使用js开发，服务端还需要用其他语言来写。
node.js官网下载地址：https://nodejs.org/en/download/，一路默认即可。最后通过cmd命令框输入：node -v查看即可
2、npm
node package Manager:Node 的包管理系统，世界上最大的软件包仓库。在这里，我们要实现各种功能几乎都能找到现成的别人写好的包，直接拿了用就好了。由系统安装好node.js后npm会附带着安装下来或者说npm就是node.js内置的功能操作命令，用于节点插件的管理（安装卸载管理依赖）
npm存在的意义：是用别人已经开发好的模块，npm使我们只需知道需要的模块名字就可以 npm install ‘module’，无需去关注模块从哪里下载，以及模块相互引用的依赖关系。极大的降低我开发的配置难度。
安装node自带npm，检查是否安装成功，执行如下命令：npm -v
缺点
npm install的时候巨慢。特别是新的项目拉下来要等半天，删除node_modules，重新install的时候依旧如此。
安装的时候，包会在同一时间下载和安装，中途某个时候，一个包抛出了一个错误，但是npm会继续下载和安装包。因为npm会把所有的日志输出到终端，有关错误包的错误信息就会在一大堆npm打印的警告中丢失掉，并且你甚至永远不会注意到实际发生的错误。
同一个项目，安装的时候无法保持一致性（可以package-lock.json锁定版本）。由于package.json文件中版本号的特点，下面三个版本号在安装的时候代表不同的含义。
“5.0.3”,
“~5.0.3”,
“^5.0.3”
“5.0.3”表示安装指定的5.0.3版本，“～5.0.3”表示安装5.0.X中最新的版本，“^5.0.3”表示安装5.X.X中最新的版本。这就麻烦了，常常会出现同一个项目，有的同事是OK的，有的同事会由于安装的版本不一致出现bug
3、cnpm
npm安装模块时，是通过npm官网进行的，但是由于其服务器在国外，所以下载速度比较缓慢，容易请求超时。容易引发下载错误，错误示例：第一次下载中途失败，再次下载完成后，但是不能够正常使用。这个问题是由于缓存引起的，可以清理上一次的下载缓存后再重新下载，因为你自己查看日志错误发生点不太现实。由此推出了cnpm。cnpm是npm其中的一个插件，由阿里巴巴的淘宝团队推出的国内镜像源，全局安装命令：npm install -g --registry=https://registry.npm.tao.bao.org
4、yarn
同样作为包管理工具，与npm显著不同的是，yarn是并行安装，二次安装下载的模块时，从缓存中取出；而npm是顺序安装，二次安装下载的模块的时，会重新在官网下载。
5、pnpm
pnpm全程是：performant npm ,意味“高性能的 npm”。在使用命令上和npm有一些区别。关键在于效率上。作为一款包管理器相较于其他包管理器的优势在于它拥有更高的安装速度和更高的磁盘利用率。
安装时需要注意兼容性问题，如果你是window用户，对于不支持的环境，建议你直接安装对应版本的node,使用npm全局安装pnpm即可，如果你是linux或者mos用户，如果你很不确定更换node是否会对你以往项目造成影响时，建议你使用n或者nvm来安装并管理多个node版本，使用时候进行切换就可以了。
| Node.js | pnpm 4 | pnpm 5 | pnpm 6 | pnpm 7 |
|---|---|---|---|---|
| Node.js 10 | ✔️ | ✔️ | ❌ | ❌ |
| Node.js 12 | ✔️ | ✔️ | ✔️ | ❌ |
| Node.js 14 | ✔️ | ✔️ | ✔️ | ✔️ |
| Node.js 16 | ?️ | ?️ | ✔️ | ✔️ |
| Node.js 18 | ?️ | ?️ | ✔️ | ✔️ |
关于硬盘使用率更高的原理是通过软连接替换硬链接，具体可以参考博客：
6、nrm / yrm 管理镜像源工具
通过命令全局下载：cnpm install -g yrm
通过 yrm -h 获取命令作用指南。
常用的命令包括 显示所有镜像源 yrm ls
更换镜像源 yrm use ‘源名称’
测试镜像源速度 yrm test ‘源名称’
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OQ9P8Oj2-1653912505181)(C:\Users\陈的电脑\AppData\Roaming\Typora\typora-user-images\image-20220408160206600.png)]
目前常用镜像
npm ---- https://registry.npmjs.org/
cnpm — https://registry.nlark.com/
taobao - https://registry.npm.taobao.org
yarn — https://registry.yarnpkg.com/
tencent- https://mirrors.cloud.tencent.com/npm/
查看当前包管理镜像地址
yarn config get registry
npm config get registry
cnpm config get registry
pnpm config get registry
设置镜像源
// 全局使用
yarn config set registry https://registry.npm.taobao.org
cnpm config set registry https://registry.nlark.com/
// …
// 临时在项目中使用
npm install --registry https://registry.npm.taobao.org
windows用户：推荐使用yarn/npm，可能cnpm/pnpm安装速度优于yarn/npm，但是可能造成诡异的 bug，比如项目运行不起来等等，最简单直接的方法就是删除node_modules重新安装。
5、@vue/cli
参考文档：https://cli.vuejs.org/zh/
6、防抖和节流的应用场景——lodash
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cdFYW3jx-1653912505181)(C:\Users\陈的电脑\AppData\Roaming\Typora\typora-user-images\image-20220413114543639.png)]
使用网址：https://lodash.com/
.vuejs.org/zh/
6、防抖和节流的应用场景——lodash
[外链图片转存中…(img-cdFYW3jx-1653912505181)]
使用网址：https://lodash.com/