搭建前端环境-nvm搭建-配置react环境-前提准备

我之前电脑实在是没办法用nvm搭建前端环境！恼火，只能推倒重来了。

首先就先去将自己的电脑里面的原来的nvm软件删除了。除此之外还要看看有没有之前单独安装过nodejs的，如果之前单独安装过那也要删除掉。

今天我就是看到自己的电脑友nvm,以为能用，于是通过nvm切换不同nodejs时，发现都是同一个npm版本，于是没办法把自己想要的环境搭建起来。这里我只有2种判断：

1、可能是除了nvm之外又单独安装了nodejs

2、之前配置的nvm时将全部nodejs环境的npm版本固定到其中某一个nodejs的npm版本

无论是哪一种都好，只要把电脑里面的有关nodejs的都删除了就好了，我说的是全部删除！（自己去搜索吧，找多几篇文章看看，看看怎么讲原来前端的配置都删除了，搞定之后再重启。）

所以说你要去搜索下：

1、win10(/其他系统)如何删除nodejs以及系统环境变量数据

2、win10(/其他系统)如何删除nvm环境以及系统环境变量数据

搞定完了有关没问题了。

接下来就是安装了：

我比较喜欢使用nvm来管理包，因为可以随时切换：

后面再发一篇文章来写这么安装吧。

接上篇文章

一、安装nvm

1、在这里拿nvm包（记得翻墙，快些）：

Releases · coreybutler/nvm-windows · GitHub

这里是直接跟着window下安装并使用nvm（含卸载node、卸载nvm、全局安装npm）_windows nvm_hst❀的博客-CSDN博客的前五步来的。

---------------------------------------为什么我只跟了这个文章的前5步过程------------------------------------

为什么不跟完在里面步骤呢？因为里面说了如果有一个npm可以让各个版本的node共用，就不会这么麻烦了。

如果这个意思是：所有nvm包管理工具所管理的node环境里的npm都是同一个或者说都是同一个npm版本。

我心想，不会真的有人讲所有node的版本共用有关npm吧？这不是沙雕吗？如果说你到了公司以后你们会做多个项目，然后每个项目的node以及npm的版本都不一样，所以还能讲所有的node版本设置为同一个npm版本吗？这不是妥妥沙雕？这样子根本没办法讲所有不同的前端项目跑起来吧？而且一个node对应得npm版本所install得前端包也就几百M不到，如果说你说讲所有版本node的npm设置为同一个是为了省内存我可不信！因为这些东西在安装nvm时不是可以设置到d盘或其他盘符吗？再说了，如果说就是想省磁盘或内存，那就项目结题后就简单使用nvm uninstall node版本号不就删除一个node环境了吗？为什么非要讲多个node的npm工具配置为同一个来共用呢？除非还是学生吧，在学校里的项目一般也没什么那就设置为同一个npm也没什么咯，反正要是不行或者说切换其他node版本时npm版本冲突了也有一大堆时间可以去修改，毕竟在校生时间多嘛。或者说这个文章实际上的共用不是我现在理解的意思。先这样吧。

因为这个文章有些我觉得不需要去继续跟着，所以只配置了这篇文章的前5步，但是还是不行的。如果仅仅是下载完上面的nvm工具以及简单配置远远不够！

bug的出现

比如说我想安装nvm里的nodejs：

D:\companyFiles\xxxxxxx2023\september\myReact>nvm install 20.5.0

D:\companyFiles\xxxxxxx2023\september\myReact>nvm use 20.5.0
Now using node v20.5.0 (64-bit)

D:\companyFiles\xxxxxxx2023\september\myReact>node -v
v20.5.0

D:\companyFiles\xxxxxxx2023\september\myReact>npm -v
9.8.0

没什么问题,于是我即将搭建react环境。

但是下面就是操蛋：

D:\companyFiles\xxxxxxx2023\september\myReact>npm install -g cnpm --registry=https://registry.npm.taobao.org

changed 421 packages in 2m

28 packages are looking for funding
  run `npm fund` for details

D:\companyFiles\xxxxxxx2023\september\myReact>cnpm -v
'cnpm' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

D:\companyFiles\xxxxxxx2023\september\myReact>where cnpm
信息: 用提供的模式无法找到文件。

感觉没什么问题，但是无法识别cnpm，于是就到配置nvm的内容了

二、配置nvm

接下来就按照这个文章：

安装nvm下载node，npm以及配置的全过程。解析npm下载包使用 -v指令发现下载的包不存在的原因。_QAQshift的博客-CSDN博客

我也是根据这个文章来的：

C:\WINDOWS\system32>npm config set prefix "D:\Web\myNodejs\node_modules\node_global"

C:\WINDOWS\system32>npm config set cache "D:\nvm\myNodejs\node_modules\node_cache"

C:\WINDOWS\system32>npm install -g cnpm --registry=https://registry.npm.taobao.org

added 404 packages in 3m

C:\WINDOWS\system32>cnpm -v
cnpm@9.2.0 (D:\Web\myNvm\nvm\v20.5.0\node_modules\node_global\node_modules\cnpm\lib\parse_argv.js)
npm@9.8.1 (D:\Web\myNvm\nvm\v20.5.0\node_modules\node_global\node_modules\cnpm\node_modules\npm\index.js)
node@20.5.0 (D:\Web\myNodejs\node.exe)
npminstall@7.10.0 (D:\Web\myNvm\nvm\v20.5.0\node_modules\node_global\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=D:\Web\myNodejs\node_modules\node_global
win32 x64 10.0.19044
registry=https://registry.npmmirror.com

于是就可以安装react环境吧：