在 Windows 11 上安装 Node.js（使用 nvm-windows），执行 JavaScript，搭建 React 环境（使用 VSCode）

2 年 ago

逸, 科

2 minutes

在 Windows 11 上安装 Node.js 并执行 JavaScript，搭建 React 环境进行尝试。
之前通过常规安装方式安装了 Node.js，但是由于需要版本管理，所以按照 nvm-windows 的方式进行了 Node 的版本管理。这是根据 MS（Microsoft）的文档参考在 Windows 上安装 Node.js 的方法。

做的事情大致上就是这样

React環境構築(VSCode)

使用命令提示符或PowerShell时，请以“以管理员身份运行”启动。

卸载Node.js

如果在操作系统中安装了Node.js，建议卸载它，因为保留配置文件等可能导致问题，所以最好卸载。

确认现有的 Node.js 现状。如果没有的话，继续进行安装，没问题。
在命令提示符或PowerShell中输入以下内容进行确认。
如果版本号被显示出来，说明已经安装好，可以进行下一步操作。
node -v

清除 Node 的缓存。
在命令提示符或PowerShell中输入以下内容（即使有警告也没问题）。
npm cache clean –force

通过“添加或删除程序”进行卸载。
按照弹出的对话框进行操作，选择“是”进行确认。
删除与 Node 相关的文件夹。
在命令提示符中输入以下内容进行删除。
＃在我的环境中，只剩下倒数第二个文件夹…
rmdir /s/q “C:\Program Files (x86)\Nodejs”
rmdir /s/q “%USERPROFILE%\AppData\Roaming\npm”
rmdir /s/q “%USERPROFILE%\AppData\Roaming\npm-cache”
rmdir /s/q “%APPDATA%\npm”
rmdir /s/q “%APPDATA%\npm-cache”
rmdir /s/q “%USERPROFILE%\.npmrc”
rmdir /s/q “%USERPROFILE%\AppData\Temp\npm-cache”
rmdir /s/q “%USERPROFILE%\AppData\Local\Temp\npm-cache”

从系统和用户的环境变量（PATH）中移除与 Node 相关的引用。
打开系统环境变量编辑器，检查环境变量 PATH，并确保其中没有引用到 node、npm。
如果还有残留的引用，进行移除。
＃在我的环境中，没有任何引用！
确认是否卸载了 Node.js。
在命令提示符中输入以下内容，如果没有找到任何内容，表示卸载完成。
如果找到了内容，删除该目录。
where node

安装Node.js的步骤（nvm-windows）。

nvm-windows安装（v1.1.11）

解压缩并运行 nvm-setup.exe 进行安装
按照屏幕指示进行操作，确认许可并同意，选择安装位置等进行安装
＃如果没有特别要求，可以使用默认选项继续
确认安装成功
在命令提示符或PowerShell中输入以下命令，如果输出显示版本号，则安装成功
※在安装后需要重新启动以使命令提示符或PowerShell可用
nvm -v

安装Node.js（v18.17.1，截至2023年8月24日的最新LTS版本，npm v9.6.7）。

安装最新的 Node.js LTS（长期支持）版本
在命令提示符或 PowerShell 中输入以下内容以安装
＃nvm install //指定要安装的版本
nvm install 18.17.1

确认安装是否成功
在命令提示符或 PowerShell 中输入以下内容，如果输出所获取的版本号，则表示安装成功
nvm ls

配置要使用的 Node.js 版本
在命令提示符或 PowerShell 中输入以下内容以配置要使用的 Node.js 版本
＃nvm use //指定要使用的版本
nvm use 18.17.1

确认使用的 Node.js 版本
在命令提示符或 PowerShell 中输入以下内容以确认版本
# Node
node –version
# Node Package Manager //为了确保。。与关联版本可能会有变化
npm –version

使用 Node.js 运行 JavaScript 代码(HTTP 服务器)

在文件夹中创建JavaScript的index.js文件
C:\nodework\index.js

在index.js中输入以下代码

index.js
// 模块导入
const http = require(“http”);
// HTTP服务器设置
http.createServer((request, response) => {
switch (request.url) {
case ‘/json’:
response.writeHead(200, { “content-type”: “application/json”, “charset”: “utf-8” });
response.write(“{ text : Hello World }”);
response.end();
break;
case ‘/html’:
response.writeHead(200, { “content-type”: “text/html”, “charset”: “utf-8” });
response.write(“<!doctype html>

Hello World

“);
response.end();
break;
default:
response.writeHead(200, { “content-type”: “text/plain” });
response.write(“Hello World”);
response.end();
}
}).listen(8888);

在命令提示符或PowerShell中切换到创建的文件夹
cd C:\nodework

在命令提示符或PowerShell中使用Node来运行JavaScript
通过执行以下命令，可以从Node中运行JavaScript
node index.js

＃要结束服务器，请使用ctrl +c
＃如果在运行时收到Windows安全提示，可以安全地取消
＃如果希望从其他计算机或设备连接，请确保允许访问
访问运行的服务器
如果能在浏览器中看到“Hello World”的话，就表示OK了
http://localhost:8888/
http://localhost:8888/json
http://localhost:8888/html

React环境配置

项目建立

参考公式的「创建新的 React 应用程序」来尝试一下。

希望将项目最简化的人可以参考以下方案。

VSCode的设置

我正在参考VSCode文档中关于在Visual Studio Code中使用React的部分。

使用VSCode进行执行

运行调试

GitHub 合作

Git 安装，仅作为参考，记录了与其他项目协作过的人的方法…
因为平时很少使用，所以细节方面有些遗忘…
可能这里的 Git 安装等可以作为参考…通过 VSCode 与 GitHub 进行协作（Win11）：codesandbox