前端环境安装【mac/window，nvm/node，npm/yarn，react/vue/ts，git，IDE(vs，沙箱/测试/运行，package与package-lock/yarn.lock】

已于 2025-05-17 16:47:13 修改
阅读量1.3k 收藏 25
点赞数 19
分类专栏： 开发 前端 文章标签： 前端 npm react.js
于 2024-01-15 19:28:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_28838891/article/details/135604891
版权
本文介绍了nvm（NodeVersionManager）在管理Node.js和npm版本，以及在Windows和Mac上的安装步骤。详细讲解了全局和临时方式安装React的Create-React-App，包括切换node版本、更换npm源至淘宝镜像，并讨论了`npx`在临时创建React应用中的作用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

mac护眼模式

IDE

AI IDE

Trae - AI 原生 IDE

Cursor - The AI Code Editor

代码生成能力

交互模式

通用IDE

VSCode

TS：JS超集

git：代码版本管理

node版本管理器（二选一）

nvm：全面，还可管理全局 npm 包

安装

window

mac

常见命令

n模块：轻量级

Node：基于 Chrome V8 引擎的 JS 运行环境

最接近且<=当前项目的版本

npm：管理JS包、npm包（包括框架react、vue、语言ts）

更换npm源为淘宝镜像

yarn：npm优化版

更换yarn源为淘宝镜像

常见报错

安装包

1.查看是否有package.json

A.初始化项目: 若无 package.json 将创建新项目并生成 package.json 

B.安装依赖: 若有 package.json 文件，读取并安装项目所需的所有依赖项

2.按照package.json一键安装包

安装具体版本的包

安装包失败

原因：一般node、npm版本与原项目相差不大没问题，可能是镜像源不够新，导致包不一样，依赖冲突

清空未安装成功的缓存：有时yarn不成功可以用npm安装

删除node_modules安装的依赖包+lock文件

最后方案：拷贝覆盖，mac可能遇到无法跳过的安全验证问题

3.启动npm start（通用）

其他：yarn serve 、 npm run dev =yarn dev

package.json->scirpts->serve查看启动命令

4.更新依赖(native模块重新编译了, 就要更新依赖)

前端框架（npm包）

React

a.全局方式

b.临时方式

运行

Vue

插件

vetur、Vue-Official：识别vue语法，不再报红

mac护眼模式

上角 苹果图标（🍎） → “系统偏好设置” → “显示器”
1/ 关闭「原彩显示」
设置路径：系统设置-显示器-关闭「原彩显示」
作用原理：避免屏幕色温自动调节造成的视觉适应负担

2/ 开启「夜览模式」
建议设置：色温调至中间偏右（约5500K）
注意事项：白天使用时可将强度调低至30%

  • 手动开启：勾选 “明天前保持开启”，屏幕会立即变暖色。

  • 定时开启：选择 “日落到日出”（自动根据定位调整）或 “自定”（手动设置时间段）。

  • 色温调节：拖动滑块调整暖色程度（越往右越暖，蓝光越少）

3/ 使用P3色域
推荐设置：显示器颜色描述文件调为「P3色域」

IDE

 Integrated Development Environment（集成开发环境）

核心功能：代码编辑、编译/解释器、调试、项目管理、扩展支持

类型代表工具适用语言/场景
通用型IDEVisual Studio Code全语言支持（需插件）
语言专用IDEPyCharm（Python）深度语言优化（如Django框架集成）
移动开发IDEAndroid Studio安卓APP开发
AI增强IDECursor/Trae IDE内置AI代码生成和补全

AI IDE

核心竞争力 = AI 协作能力 + 架构思维 + 业务理解

  • Prompt工程是“怎么问”：精确发问，确保AI输出可用代码。

  • 架构思维是“问什么”：决定哪些问题该交给AI解决，哪些必须人工设计。

AI IDE核心能力差别在于模型

DeepSeek满血版：包括更完整的功能和更少的服务器负载问题。

模型/厂商核心优势技术短板典型应用场景
GPT-4.5 (OpenAI)多模态融合（文本/图像/音频/视频），复杂逻辑推理能力全球领先中文理解偏差率12%，API成本高科研分析、跨国企业协同、动态内容生成
Claude 3.7 Sonnet (Anthropic)编程领域断层领先（HumanEval评测91.2分），10万token长文档解析视觉任务较弱，商业化按需计费软件工程、法律文书分析、合规性文档
Gemini 2.0 (Google)原生多模态，百万级上下文窗口，工业设计图纸生成中文优化不足，生态开放性较低智能制造、教育课件生成、影视后期
DeepSeek R1 (深度求索)国产开源标杆，推理速度提升3倍，128k中文长文本处理中文文化类问答错误率18%政务文档分析、金融研报生成、代码辅助

Trae - AI 原生 IDE

支持从VSCode/Cursor迁移配置

设计稿转代码

Trae 解决无法登录问题_trae国际版-优快云博客

对比维度Trae IDE（独立应用）Trae 插件（MarsCode 衍生）
AI整合度深度整合，支持全项目级AI决策依赖宿主IDE，功能受限于插件架构

trae国际版：登录需要VPN，模型回答（插入等功能）可能需要VPN

vscode +语音，模型无需VPN

cursor +图片

维度Trae IDECursor IDE
开发公司字节跳动（国内版/国际版）Anysphere（美国）
核心定位AI原生IDE，专为中文开发者优化基于VS Code重构，全球化多语言支持
模型支持

国内版：

Doubao-1.5-pro、DeepSeek R1/V3
国际版：

Claude 3.5/3.7（更擅长编程）、GPT-4o（免费）

GPT-4、Claude 3.5（需订阅Pro版）
价格策略完全免费Pro版20美元/月，企业版更高

Cursor - The AI Code Editor

Cursor 可能经常token用完

代码生成能力

  • Trae

    • Builder模式：自动生成完整项目框架，适合快速原型开发。

    • 中文优化：在中文API调用、注释生成等场景准确率高18.3%。

  • Cursor

    • 多语言支持：擅长TypeScript、Go等语言的强类型推导，跨文件编辑能力更强。

    • 复杂任务：如微服务架构设计，编译通过率比Trae高9.7%。

交互模式

  • Trae

    • Chat模式：支持中文自然语言交互，一键修复Bug或生成注释。

    • 多模态：上传设计图生成代码（如“截图即开发”）

通用IDE

VSCode

官方直接下载(下载最新版或更新到最新版)

VSCode插件：Auto Dark Mode（根据时间自动切换）。

 优先选浅色主题的情况

  • 白天/光线充足环境
  • 需要精确辨识字体的工作（如代码审查、文档编辑）
  • 有散光或老花眼（深色主题会加重视觉模糊）

2. 优先选深色主题的情况

  • 夜间/低光照环境
  • OLED屏幕用户（深色省电且减少烧屏风险）
  • 短期聚焦特定元素（如调试高亮语法）
要素深色主题浅色主题
蓝光暴露减少屏幕整体蓝光发射量蓝光较多，但可通过系统级护眼模式过滤
瞳孔调节瞳孔放大，可能增加眩光敏感度瞳孔自然收缩，减少外部光线干扰
文本对比度高对比度易引发视疲劳（白字黑底）低对比度更接近纸质阅读体验（黑字白底）
环境光适应性适合暗环境（夜间/低光照）适合明亮环境（白天/办公室）

TS：JS超集

作为npm包发布

git：代码版本管理

git -version（根据提示，mac自带的安装即可，不过不好卸载，如果限制外网，显示安装时长时长时短，多试一下即可）

node版本管理器（二选一）

n模块

nvm（Node Version Manager）

nvm-windows（Windows平台上的Node Version Manager）

切换版本后，要删除node_modules安装的依赖包+lock文件

nvm：全面，还可管理全局 npm 包

nvm 主要是用来管理 nodejs 和 npm 版本的工具，可以用来切换不同版本的 nodejs。
安装nvm之前先卸载node

Mac彻底卸载node

sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}

Windows系统完全卸载删除 Node.js_卸载nodejs命令-优快云博客z

安装

window
mac

sudo curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

若nvm -v不成功


    
1、进入顶层文件夹
    cd ~
    
2、配置环境变量
    vim ~/.bash_profile
    
3、然后将下面的配置信息输入保存
    export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
    [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion


      Esc 键从插入模式切换到命令模式，然后执行相应的命令。
      :wq   退出并保存

   :q! 退出不保存 

   :e! 放弃未保存

   w 表示写入（write），q 表示退出（quit）。组


4、刷新环境变量
    source ~/.bash_profile
    
5、输入 nvm -v 检查nvm是否可用

6、如果不可以参照下面配置zsh

1、进入顶层文件夹
    cd ~
    
2、配置环境变量
    vim ~/.zshrc
    
3、然后将下面的配置信息输入保存
    export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
    [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
    
4、刷新环境变量
    source ~/.bash_profile

常见命令

nvm -v 查看当前版本
nvm --config 
nvm list 查看已安装node版本列表
nvm install <version> 下载对应node版本（如：nvm install 14.20.1）

nvm uninstall <version> 卸载
nvm use <version> 切换node版本
nvm on 开启nvm
nvm off 关闭nvm

nvm alias default 版本号 设置默认node版本

window下安装nvm，node, npm, yarn

n模块：轻量级

  1. 安装 n 工具：

    使用Node.js自带的npm包管理器，可以全局安装n工具。

    npm install -g n

  2. 查看可用的Node.js版本：

    运行以下命令，以查看所有可用的Node.js版本。

    n ls

  3. 安装特定版本的Node.js：

    选择要安装的特定版本，并运行以下命令：

    n <version>

    例如，要安装Node.js 14版本：

    n 14

  4. 切换到已安装的Node.js版本：

    使用以下命令切换到先前安装的Node.js版本：

    sudo n

  5. 选择版本

    这会显示一个交互式界面，可以在其中选择要切换的版本。

  6. ↑↓选择，enter确定选择，q退出

  7. 卸载特定版本的Node.js：

    如果要卸载某个版本，可以运行以下命令（其中<version>为版本号）：

    n rm <version>

Node：基于 Chrome V8 引擎的 JS 运行环境

最接近且<=当前项目的版本

很多项目刚开始跑不起来是node版本问题

mac 安装node.js_mac安装nodejs-优快云博客

npm：管理JS包、npm包（包括框架react、vue、语言ts）

tips：版本可以高于项目要求版本（如6.0），只要稳定版本就行(16，18)，别用最新版本就行

# 依次执行以下命令
nvm install node版本
nvm ls 查看列表
nvm use node版本

node -v
npm -v

更换npm源为淘宝镜像

# 查询当前使用的镜像源
npm get registry

# 设置为淘宝镜像源
npm config set registry https://registry.npmmirror.com/

# 还原为官方镜像源
npm config set registry https://registry.npmjs.org/

yarn：npm优化版


# 全局安装yarn
npm install -g yarn
# 查看yarn 版本
yarn -v

更换yarn源为淘宝镜像

​

# 查询当前使用的镜像源
yarn config get registry

# 设置为淘宝镜像源
yarn config set registry https://registry.npmmirror.com/

# 还原为官方镜像源
yarn config set registry https://registry.yarnpkg.com/

常见报错

安装包

1.查看是否有package.json

A.初始化项目: 若无 package.json 将创建新项目并生成 package.json 

#初始化一个新的 package.json

yarn init

#安装依赖

yarn

B.安装依赖: 若有 package.json 文件，读取并安装项目所需的所有依赖项

tips：

package.json ：依赖关系的配置文件，没有lock文件时，按照package.json安装

package-lock.json ：npm实际安装依赖版本的锁定文件，以确保在不同环境中的一致性，重新安装包时会遵循package-lock.json

yarn.lock：Yarn在安装依赖时会创建或更新这个文件，，重新安装包时会遵循yarn.lock

2.按照package.json一键安装包

Yarn: yarn= yarn install 的简写

npm: npm install

安装包生成的文件夹：node_modules

安装具体版本的包

npm install 包@版本号

安装包失败
原因：一般node、npm版本与原项目相差不大没问题，可能是镜像源不够新，导致包不一样，依赖冲突
清空未安装成功的缓存：有时yarn不成功可以用npm安装

npm/yarn cache clean

删除node_modules安装的依赖包+lock文件

如果安装错了，可以删除重安

rm -rf node_modules

rm -rf 命令是递归地强制删除目录，不会将文件移动到垃圾桶或回收站，而是直接从文件系统中删除。

最后方案：拷贝覆盖，mac可能遇到无法跳过的安全验证问题

3.启动npm start（通用）

其他：yarn serve 、 npm run dev =yarn dev
package.json->scirpts->serve查看启动命令

返回项目根目录

4.更新依赖(native模块重新编译了, 就要更新依赖)

yarn

yarn add -D ./native/bridge_nodejs

yarn dev

前端框架（npm包）

React

a.全局方式

安装 Create-React-App：要安装 React 脚手架，您需要使用 npm 包管理器安装 Create-React-App。请在终端中运行以下命令：

npm install -g create-react-app

创建项目：现在您已经安装了 React 脚手架，您可以使用以下命令在 Mac 上创建新的 React 项目：

create-react-app my-app

启动项目：最后，您可以在终端中运行以下命令启动您的 React 项目：

cd my-app npm start

b.临时方式

 npx create-react-app your-app-name
 

create-next-app 版本 14.0.4 要求 Node.js 版本至少为 18.17.0

运行

cd my-app
npm start
 

这个过程为什么慢,因为这个过程实际会安装三个东西

1.react:react的顶级库.

2.react-dom:因为react有很多的运行环境,比如app端的react-native,我们要在web上运行就使用react-dom.

3.react-scripts:包含运行和打包应用程序的所有脚本配置.

Mac 搭建React脚手架环境create-react-app - 掘金

Vue

插件

vetur、Vue-Official：识别vue语法，不再报红

mac安装node,nvm,yarn,配置全局环境变量
weixin_41977129的博客
12-27 3812
提示：最好先安装nvm 用nvm安装node指定版本，不过我本人先安装的node,看着没啥问题。
Mac安装brew nvm node yarn前端环境
qq_39517116的博客
03-14 3095
1.使用脚本安装，选择中科大的，然后安装，安装完成后就会设置镜像了 /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" brew update brew install nvm % mkdir ~/.nvm % vi ~/.zshrc
【nvm安装详细教程】方便使用各个版本的node
最新发布
Una的博客
05-05 4011
在开发过程中，切换多个nodejs的版本。 一篇搞定，教你如何使用nvm。
npm、cnpm、yarn管理工具常见指令Node与Vue安装环境配置及nvm常用指令详解
Programming is art
04-26 2216
npm：是Node.js下的资源包管理器，可以简单的理解为下载、更新、卸载等一系列操作的命令框工具。webpack：它主要用途是通过CommonJS的语法把所有客户端需要发布的静态资源做整合，例如图片视频、静态页面、css样式、font-icon等资源合并打包等操作。vue-cli：vue官方所提供快速生成一个Vue工程化的模版项目工具。
mac 安装yarn_不可错过的包管理工具 - yarn
weixin_39789094的博客
11-23 1083
快速、可靠、安全的依赖管理工具Nodejs 嫡系包管理工具随着前端工程化体系的不断完善和"大前端"概念的丰富和发展，仅前端开发用到 Nodejs 的地方也越来越多，各大前端团队基于 Nodejs 的工具链建设也不断推动着前端开发走向新的高度；说到 Nodejs，自然离不开其官方的包管理工具 npm；目前，npm 已经成为世界上最大的包管理器，在其仓库中托管着超过 100 万个包，且还不包括企业内...
nvm的安装
zm_miner的博客
01-13 564
本想使用create-react-app创建一个react项目 但是当我输入 1 npx create-react-app react-hooks-demo 提示我 You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). We no longer support global installation of Create React App. Please remove any glo
构建大规模单页应用：北极星H5微前端架构实战
微前端架构作为一种现代化的前端开发模式，通过将大型应用分解为多个小型、独立的前端应用，实现更好的可维护性、可扩展性和技术栈多样性。本文概述了微前端架构的设计理念、技术选型以及安全策略，重点介绍了北极星...
Mac 安装Nodejs及NPM常见问题
鹤九日的博客
10-29 4630
NPM在Mac中的安装，使用命令及问题相关解决方式
如何解决由于yarn.lock文件缺失导致node_modules未能加载，并重新生成yarn.lock文件
CheyBen的博客
04-12 4505
原因：在使用yarn加载node_modules，未能成功的原因之一是yarn.lock文件缺失，要重新生成yarn.lock，可通过以下两个步骤： 1、npm i 2、再次执行yarn，可以将再次生成yarn.lock文件
nvm, npm命令以及package.json文件详解
编程是一门实践技术
06-25 1280
nvm，全称Node Version Manager，是一个用于管理Node.js版本的工具。使用nvm，可以轻松地在同一台电脑上安装和切换不同版本的Node.js，从而方便地进行开发和测试。 nvm提供了一些命令来管理Node.js版本，如安装、卸载、使用特定版本的Node.js等。通过nvm，开发人员可以轻松地管理和切换不同版本的Node.js，以满足不同项目的需求。
包管理工具npm、yarn以及nvm简介及简单使用
漫漫前端路，进一寸有进一寸的欢喜
03-09 2597
在使用npm、yarn等包管理工具之前，我们首先了解一些基本的概念 模块（module） 通常以单个文件形式存在的功能片段，入口文件通常称之为入口模块或主模块 库（library，简称lib） 以一个或多个模块组成的完整功能块，为开发中某一方面的问题提供完整的解决方案 包（package） 包含元数据的库，这些元数据包括：名称、描述、git主页、许可证协议、作者、依赖等等 版本号：主版本号.次版...
如何从零开始配置前端环境以及安装必备的软件插件
m0_57524265的博客
08-05 1万+
本文讲解了 VSCode、Node.js、yarn、Webpack、vueCLI、git、等必备软件安装、以及VSCode 常用插件、VSCode代码格式化、VUE开发者工具安装
nvm安装详细教程（卸载旧的nodejs，安装nvm、node、npm、cnpm、yarn及环境变量配置）
热门推荐
sjp991012的博客
11-16 10万+
参考文章《nvm-下载、安装、使用（2023/07/12更新）》《安装nvm，并使用nvm安装nodejs及配置环境变量》
前端环境搭建：nvm、volta 的使用 node 版本管理工具及 nrm 镜像
Story_0809的博客
11-28 6994
前端开发环境搭建：nvm、volta 的使用 node 版本管理工具及 nrm 镜像
【做牛马第一步】从零开始配置前端环境以及安装必备的软件及其插件
weixin_55846296的博客
08-11 1万+
前端开发是一个快速发展的领域，作为一名前端开发人员，需要掌握各种技术和工具。刚入职，在开始前端开发之前，首先需要配置好前端开发环境，包括安装必备的软件和插件。本文将介绍如何从零开始配置前端环境以及安装必备的软件及其插件，以及一些平时工作可以帮助到我们的工具，之后遇到好用的会一直更新的。从零开始配置前端环境需要安装一些必备的软件和插件，包括 Node.js、编辑器、Git、Chrome 浏览器、包管理工具和 VS Code 插件等。
前端 环境部署 配置
weixin_43319452的博客
08-07 867
提供了命令行界面来实现对Vue项目的快速构建、打包和开发等功能，加快Vue项目的开发和构建，并增加项目的可维护性和可扩展性，受到了众多Vue开发者的欢迎和使用。综上所述，Node.js提供了JavaScript在服务器端运行的环境，而npm和cnpm提供了方便的软件包管理和安装环境，而Vue.js则是基于JavaScript语言的一个前端框架，它们三者共同为开发Web应用程序提供了强大的支持和便捷的开发流程。：由于npm安装插件时速度慢，因此淘宝团队为了解决这个问题而搭建了npm的淘宝镜像——cnpm。
[前端工具] 使用 nvm-windows 管理 Node 及 Vue 环境
不定期更新 Web 开发及机器学习相关博客
01-25 1294
nvm 管理 Node 及 Vue 环境
前端开发node.js、vue安装环境【安装node版本管理工具-nvm，耗时一天时间踩坑总结】
在写作的路上持续输出。
09-23 3359
前端node版本管理工具nvm安装与使用【 避坑指南】耗时一天踩坑总结
前端node环境安装：nvm安装详细教程（安装nvm、node、npm、cnpm、yarn及环境变量配置）
Json的知识梦工厂
12-10 1376
需求：在做前端开发的时候，有的时候 这个项目需要 node 14 那个项目需要 node 16，我们也不能卸载 安装。这个时候 就需要 一个工具 来管理我们的 node 版本和 npm 版本。百度后 又是 让给 自己创建的文件夹 权限 又是 清除 c盘下的 .npmrc 文件。大家不要用混了~ 哈哈。如果有C:\Users\用户名\AppData\Roaming\npm，修改为D:\app\nodejs\nvm\nodeGlobal。就新建D:\app\nodejs\nvm\nodeGlobal。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值