之前做了vscode开发工具好用的插件的博文，下面我总结了一些前端环境搭建的知识点。

本文内容思维导图

相关系列文章
vscode开发工具好用的插件
代码管理工具（gitee）

本文会用到的地址

node官网：node官网地址
cnpm镜像地址：淘宝镜像地址

1、下载node

点击这里node官网地址去下载node.js，下载过程这里我就不做多的描述了。（傻瓜式安装即可，记住自己的安装路径，配置环境变量的时候会用到）

2、配置node运行时环境（配置环境变量）

这里有两种方法去配置node运行时环境。

  • 第一种
    1、鼠标右键我的电脑。
    2、选中属性 =》 高级系统设置 =》 高级 =》 环境变量 =》双击用户变量中的path =》 点击新建 =》把安装的node文件下的bin文件路径复制上去 =》保存即可
  • 第二种
    如果你没有自定义node安装路径，那么就可以直接执行以下代码。（node默认安装路径： **C:\Program Files\nodejs**） 
PATH=C:\oraclexe\app\oracle\product\10.2.0\server\bin;C:\Windows\system32;
C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;
c:\python32\python;C:\MinGW\bin;C:\Program Files\GTK2-Runtime\lib;
C:\Program Files\MySQL\MySQL Server 5.5\bin;C:\Program Files\nodejs\;
C:\Users\rg\AppData\Roaming\npm

如果你自定义node安装路径，那么把路径替换你自定义安装的路径即可

PATH=C:\oraclexe\app\oracle\product\10.2.0\server\bin;C:\Windows\system32;
C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;
c:\python32\python;C:\MinGW\bin;C:\Program Files\GTK2-Runtime\lib;
C:\Program Files\MySQL\MySQL Server 5.5\bin;“你自定义的node路径”;
C:\Users\rg\AppData\Roaming\npm

3、检查node是否安装成功

1、win + r
2、弹出框中输入 cmd
3、在终端中输入 node -v
显示版本号即可（如下）
v0.10.26

4、npm & cnpm & yarn $ tyarn简介

  • npm：是nodejs内置的软件包管理器。毫无疑问，npm是用来管理软件包的。
  • yarn：替代npm的包管理器，他是来弥补npm的缺陷的。（npm install特别慢，并且有些时候还会出现丢包的情况导致项目运行不起。）
  • cnpm：npm在国内的镜像源（每10分钟会去同步一次国外npm仓库的数据。）
  • tyarn：yarn在国内的镜像源

5、npm&yarn缓存地址修改

这里配置一下npm和yarn的缓存地址。默认是在c盘这里我们可以换到其他地方。（c盘资源占用太多挺不好的，大家都懂的）

# 查看缓存目录
npm config get cache
yarn cache dir
# 清理缓存包
npm cache clean --force
yarn cache clean
# 设置npm缓存目录:修改默认在C盘的缓存，防止C盘过大（提前建立好缓存文件夹）
npm config set prefix "G:\temp\node-global"
npm config set cache "G:\temp\node-cache"
# 配置Yarn缓存目录: 第一步
yarn config set prefix G:\temp\yarn-global
yarn config set cache-folder G:\temp\yarn-cache
yarn config set global-folder G:\temp\yarn-global
# 第二步，打开%userprofile%，修改.yarnrc，添加新行：
--global-folder "G:\\temp\\yarn-global"
# 最后通过yarn global dir验证一下修改是否成功

6、npm&yarn配置镜像源


# 查看当前源
npm get registry
yarn config get registry
# 设置镜像源
npm config set registry http://registry.npm.taobao.org/
yarn config set registry http://registry.npm.taobao.org/

7、cnpm&yarn安装

# 安装淘宝的cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 安装tyarn
npm i yarn tyarn -g
# yarn中global包升级
yarn global upgrade
# yarn中特定包升级
yarn upgrade -lastest umi
yarn upgrade umi@3.0.0

这里是我的参考资料

小结

这里主要是对node的这些包管理工具的安装与配置进行一个总结。如果想了解包管理器的指令那么请大家到这里包管理工具指令，方便大家学习。别忘了给个三连 😊😊😊！！！