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

目录

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语法，不再报红

VSCode：代码编辑器

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

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命令-CSDN博客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-CSDN博客

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语法，不再报红