讲师中心 微信公众号
AI工具推荐 视频效率加速

Windows system怎么安装Node.js运行环境开发前端

陌杰小哥_4481

陌杰小哥_4481

发布时间:2026-10-25 13:05:29

|

114人浏览过

|

来源于php中文网

原创

必须安装Node.js LTS版、勾选“Add to PATH”、配置国内npm镜像源;验证node/npm版本后,可成功初始化Vite+React项目并运行。

windows system怎么安装node.js运行环境开发前端

要在Windows系统上安装Node.js运行环境来开发前端项目,必须确保安装的是稳定可用的LTS版本、正确配置命令行可执行能力,并让npm能快速下载依赖——这三步缺一不可,否则新建Vue或React项目时会卡在依赖安装环节。

下载并安装Node.js LTS版

打开浏览器,访问 https://nodejs.org/zh-cn/ → 在首页点击【LTS】按钮(不是Current)→ 下载后缀为 .msi 的安装包(如 node-v20.18.0-x64.msi)→ 双击运行。

安装向导中务必勾选 “Add to PATH” 选项,这是让 cmd 或 PowerShell 能直接识别 node 和 npm 命令的关键。若漏选,后续所有命令都会报错 'node' 不是内部或外部命令。

安装路径建议选默认(C:\Program Files\nodejs\),或自定义到 D:\nodejs\ 等无中文、无空格的路径。含中文或空格会导致部分脚手架工具(如 create-react-app)解析失败。

立即学习“前端免费学习笔记(深入)”;

验证基础安装是否生效

按 Win + R → 输入 cmd → 回车打开命令提示符。

依次输入以下两条命令:

node -v

npm -v

若均返回类似 v20.18.0 和 10.9.2 的版本号,说明运行时和包管理器已就位;若其中任一命令报错,请关闭当前窗口,重新打开 cmd 再试——旧终端不会自动读取新添加的 PATH。

配置国内 npm 镜像源(必做)

npm 默认从国外服务器拉包,前端项目 install 依赖时极易超时失败。必须切换为国内镜像源,否则连初始化一个 Vite 项目都可能卡死半小时。

在 cmd 中执行:

npm config set registry https://registry.npmmirror.com

执行后立即验证:

npm config get registry

Json Repair Kit
Json Repair Kit

使用 Node.js 评估修复格式错误的 JSON,自动纠正尾随逗号、单引号、未加引号的键等常见问题,实现文件规范化。

下载

输出必须是 https://registry.npmmirror.com 才算成功。如果仍显示 https://registry.npmjs.org,则说明上条命令未生效,需检查是否以管理员身份运行了 cmd(某些系统策略下非管理员权限无法写入全局配置)。

设置全局模块安装目录(可选但推荐)

方法一:使用管理员权限创建专用目录

在 Node.js 安装根目录下(例如 C:\Program Files\nodejs\)手动新建两个文件夹:node_global 和 node_cache。

以管理员身份运行 cmd → 执行以下两条命令(路径需与你实际创建位置一致):

npm config set prefix "C:\Program Files\nodejs\node_global"

npm config set cache "C:\Program Files\nodejs\node_cache"

方法二:跳过手动建目录,用命令自动完成

在管理员 cmd 中直接运行:

mkdir "C:\Program Files\nodejs\node_global" && mkdir "C:\Program Files\nodejs\node_cache" && npm config set prefix "C:\Program Files\nodejs\node_global" && npm config set cache "C:\Program Files\nodejs\node_cache"

这一步做完后,今后全局安装的工具(如 vite、pnpm、http-server)将统一存放在 node_global 中,避免散落在 C:\Users\XXX\AppData\Roaming\npm 下导致权限混乱或磁盘占用失控。

测试前端项目初始化流程

第一步:在任意空白文件夹内打开 cmd(右键 → “在此处打开终端”)。

第二步:运行 npx create-vite@latest my-app -- --template react → 按提示选择框架和预设。

第三步:进入项目目录 → cd my-app → npm install → npm run dev。

若浏览器自动弹出 http://localhost:5173 并显示 React 欢迎页,说明整个 Node.js 前端开发环境已完整就绪。

热门AI工具

更多
火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2643

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

5763

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6730

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

6458

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

923

2024.05.22

node.js调试
node.js调试

node.js调试可以使用console.log()输出调试信息、断点调试和第三方调试工具。详细介绍:1、console.log()输出调试信息,通过在代码中插入console.log()语句,开发人员可以在控制台输出变量的值、函数的执行结果等信息,以便观察代码的执行流程和状态;2、断点调试,可以在代码中设置断点,以便在特定位置暂停代码的执行,观察变量的值和执行流程等。

11209

2023.09.19

JavaScript 全栈开发基础(Node.js + 前端)
JavaScript 全栈开发基础(Node.js + 前端)

本专题系统介绍 JavaScript 在全栈开发中的核心知识结构,涵盖 Node.js 基础、Express/Koa 接口构建、前端交互设计、模块化与包管理、数据库连接、前后端数据通信与部署流程。通过完整项目示例,帮助学习者掌握从浏览器到服务器的一体化开发能力,实现真正意义上的全栈入门。

434

2025.11.26

Node.js后端开发与Express框架实践
Node.js后端开发与Express框架实践

本专题针对初中级 Node.js 开发者,系统讲解如何使用 Express 框架搭建高性能后端服务。内容包括路由设计、中间件开发、数据库集成、API 安全与异常处理,以及 RESTful API 的设计与优化。通过实际项目演示,帮助开发者快速掌握 Node.js 后端开发流程。

761

2026.02.10

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

60

2026.10.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Conan 2 安装指南
Conan 2 安装指南

共0课时 | 0人学习

Miniconda官方安装文档
Miniconda官方安装文档

共0课时 | 0人学习

HBuilderX Windows 安装手册
HBuilderX Windows 安装手册

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn