搭建环境

官网下载 & 历史版本

安装 Node.js

下载二进制版本，解压到指定位置并打开文件夹，新建 node_global 和 node_cache 两个文件夹

1
2
3
cd D:\APP\Node
D:
mkdir node_global,node_cache

环境变量

1
2
setx /M Path "%Path%" "D:\APP\Node"
node -v


设置 Prefix（全局）和 Cache（缓存）路径

1
2
3
4
5
6
#设置全局模块存放路径
npm config set prefix "D:\APP\Node"
npm config get prefix
#设置缓存文件夹
npm config set cache "D:\APP\Node\node_cache"
npm config get cache

设置成功后，之后安装的模块就存放在 node_global 文件夹里，如：安装 cnpm（淘宝镜像）

包管理

cnpm、pnpm 和 yarn 是 JavaScript 生态中的三个包管理工具，虽然它们有相似的功能，但在性能、依赖管理和使用场景等方面有所不同：

特性 cnpm pnpm yarn
性能 主要优化下载速度 非常快，节省磁盘空间，优化安装 比 npm 快，支持并行安装
缓存机制 使用淘宝镜像缓存 使用硬链接节省磁盘空间 使用智能缓存机制，支持离线安装
依赖存储 使用和 npm 相同的存储方式 使用硬链接和符号链接节省空间 类似 npm，但有更好的缓存机制
锁文件 不支持锁文件 使用 pnpm-lock.yaml 锁定版本 使用 yarn.lock 锁定版本
离线支持 不支持离线安装 支持离线安装 支持离线安装
安装方式 cnpm install pnpm add yarn add
兼容性 与 npm 完全兼容 与 npm 和 yarn 不完全兼容 与 npm 和 pnpm 兼容较好
适用场景 适用于中国地区使用 npm 速度慢 适用于节省磁盘空间和提高性能 适用于快速安装和良好的团队协作

cnpm

cnpm 是 npm 的中国镜像版本，旨在解决中国大陆用户访问 npm registry 时的速度问题，可以不安装直接设置淘宝镜像进行使用。

1
2
3
npm install cnpm -g --registry=https://registry.npmmirror.com
#查看 cnpm 源
cnpm config get registry

pnpm

pnpm 是一个优化了依赖管理和磁盘空间占用的包管理工具，采用硬链接和符号链接来提高性能。

1
2
3
4
5
npm install pnpm -g --registry=https://registry.npmmirror.com
#查看配置
pnpm config list
#查看 pnpm 源，默认就是 https://registry.npmmirror.com
pnpm config get registry

yarn

yarn 是 Facebook 推出的包管理工具，旨在解决 npm 的性能和依赖管理问题，提供更高效的安装和更好的团队协作支持。

1
2
3
4
5
6
7
npm install yarn -g --registry=https://registry.npmmirror.com
#查看配置
yarn config list
#查看 yarn 源
yarn config get registry
#修改 yarn 源，默认是 https://registry.yarnpkg.com
yarn config set registry https://registry.npmmirror.com

管理镜像源

修改镜像源

1
2
3
4
5
6
#查看配置
npm config list
#设置淘宝镜像源，会自动注释默认源 https://registry.npmjs.org/
npm set registry https://registry.npmmirror.com
#删除淘宝源，镜像源重置为默认
npm config rm registry

安装 nrm 来管理和快速切换私人配置的 registry
1
2
3
4
5
6
7
8
9
10
11
12
13
14
npm install nrm -g
#查看所有源
nrm ls
#切换源
nrm use taobao
#添加源
nrm add <源名称> <源地址>
nrm add taobao https://registry.npmmirror.com
#删除源
nrm del taobao
#测试所有源的延迟，后接<源名称>测试单个
nrm test
#更多参数
nrm -h

其他命令

1
2
3
4
5
6
7
8
9
10
11
12
#查看安装列表
npm ls -g
npm ls
#清理缓存
npm cache clean -f
#升级到最新版
npm install npm@latest
npm install npm
#安装指定版本
npm install npm@8.6.1
#卸载
npm uninstall vue

新建项目

安装 Vue

1
cnpm install vue -g

安装 Vue 命令行工具，即 vue-cli 脚手架

1
cnpm install vue-cli -g

创建项目


安装工程依赖，为了速度把 npm 换成淘宝的 cnpm

1
2
cnpm install
cnpm run dev