1
2
3
4
5
6
7
8

# Windows (用管理员打开 PowerShell)
winget install OpenJS.NodeJS.LTS

# macOS (用 Homebrew)
brew install node@lts

# Linux (用 nvm 安装，最灵活，后面会讲)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

1
2
3
4
5
6

# macOS / Linux 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 安装完成后，重新加载终端配置文件
source ~/.bashrc  # 如果你用的是 bash
source ~/.zshrc   # 如果你用的是 zsh（macOS 默认就是这个）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 安装最新的 LTS 版本
nvm install --lts

# 安装指定版本
nvm install 20

# 查看已经安装的所有版本
nvm ls
# 输出示例：
#        v18.17.0
#        v20.14.0
# ->     v22.14.0
#         system
#    # -> 表示当前正在使用的版本

# 切换到指定版本（临时切换，关闭终端就恢复）
nvm use 20

# 设置默认版本（永久生效）
nvm alias default 20

# 卸载某个版本
nvm uninstall 16

1
2
3
4
5
6
7

# 查看 Node.js 版本
node -v
# 打印结果示例：v20.14.0

# 查看 npm 版本（Node.js 自带的包管理器，后面会重点讲）
npm -v
# 打印结果示例：10.8.2

1
2
3
4
5
6
7
8

# 进入你的项目文件夹
cd my-react-project

# 初始化项目（会生成 package.json）
npm init

# 或者一步到位，自动填写默认值（不询问）
npm init -y

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

{
  "name": "my-react-project",   // 项目名称
  "version": "1.0.0",            // 版本号（遵循语义化版本 SemVer）
  "description": "我的第一个 React 项目",  // 项目描述
  "main": "index.js",            // 入口文件
  "scripts": {                   // 脚本命令（重点！）
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

# 安装一个包（例如：React）
npm install react
# 安装结果示例：added 1 package in 2s

# 安装并记录到 package.json 的 dependencies（生产依赖）
# 相当于 npm install react --save
npm install react
# dependencies 里的包是项目运行时需要的依赖

# 安装并记录到 package.json 的 devDependencies（开发依赖）
# 相当于 npm install react --save-dev
npm install --save-dev eslint
# devDependencies 里的包只在开发时需要，打包上线时不需要

# 一次性安装多个包
npm install react react-dom axios lodash

# 安装指定版本的包
npm install react@18.2.0  # 安装 React 18.2.0 版本
npm install react@^18.0.0  # 安装 React 18.x.x 中的最新版本（^表示可上浮）
npm install react@~18.2.0  # 安装 React 18.2.x 中的最新版本（~表示可小幅上浮）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// package.json 示例
{
  "dependencies": {
    "react": "^19.0.0",     // 项目运行时需要（React 19！）
    "react-dom": "^19.0.0", // React DOM 渲染库
    "axios": "^1.6.0"      // 网络请求库，运行时需要
  },
  "devDependencies": {
    "eslint": "^8.55.0",    // 代码检查，开发时需要
    "prettier": "^3.0.0",   // 代码格式化工具
    "vite": "^5.0.0"        // 构建工具，开发时需要
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
  "scripts": {
    "dev": "vite",                    // 启动开发服务器
    "build": "vite build",           // 构建生产版本
    "preview": "vite preview",       // 预览生产构建结果
    "lint": "eslint src/",           // 运行代码检查
    "test": "vitest",                // 运行测试
    "format": "prettier --write ."   // 格式化所有代码文件
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

# 运行 dev 脚本
npm run dev

# 运行 build 脚本
npm run build

# 运行自定义脚本
npm run lint
# 打印结果示例：> eslint src/
# ✖ 3 problems (2 errors, 1 warning)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

# npm install：根据 package.json 和 package-lock.json 安装依赖
npm install
# 特点：
# 1. 会自动添加/删除/更新依赖（根据 package.json 的变化）
# 2. 适合开发阶段使用
# 3. 速度相对较慢（因为要检查最新版本）

# npm ci：干净利落地安装依赖（"CI" = Continuous Integration，持续集成）
npm ci
# 特点：
# 1. 完全根据 package-lock.json 安装，忽略 package.json
# 2. 删除 node_modules 之后重新安装，确保一致性
# 3. 速度更快
# 4. 适合自动化环境（CI/CD）和生产部署
# 打印结果示例：
# Added 1247 packages in 45s

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// package-lock.json 示例（简化版）
{
  "dependencies": {
    "react": {
      "version": "18.2.0",        // 精确版本
      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
      "integrity": "sha512-b+Rs..."
    },
    "react-dom": {
      "version": "18.2.0",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
      "integrity": "sha512-b+Rs..."
    }
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

# 创建一个 React 项目（不需要全局安装 create-vite）
npx create-vite@latest my-react-app --template react

# 逐段解释这条命令：
# npx                      -> 用 npx 运行（自动下载并执行，用完不留痕迹）
# create-vite@latest       -> create-vite 工具名，@latest 表示最新版本
# my-react-app             -> 项目名称（会创建一个同名文件夹）
# --template react          -> 指定使用 React 模板
#   注意：不写 --template react，命令会进入交互式菜单，让你手动选择框架
# 打印结果示例：
# Scaffolding project in my-react-app...
# Done! Now run:
#   cd my-react-app
#   npm install
#   npm run dev

1
2

# 创建 React 项目（老方法，现在不推荐了，太慢）
npx create-react-app my-react-app

1
2
3
4
5
6

# pnpm 的安装
npm install -g pnpm

# 之后，把所有的 npm install 换成 pnpm install
pnpm install
# 打印结果示例：Lockfile is up-to-date, node_modules is up to date

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

# 全局安装 pnpm
npm install -g pnpm

# 验证安装
pnpm --version
# 打印结果示例：9.0.0

# 使用 pnpm 的常用命令（几乎和 npm 命令一样）
pnpm install              # 安装依赖（对应 npm install）
pnpm add react            # 添加生产依赖（对应 npm install react）
pnpm add -D eslint        # 添加开发依赖（对应 npm install --save-dev eslint）
pnpm remove react         # 卸载包（对应 npm uninstall react）
pnpm update               # 更新所有包到最新兼容版本
pnpm run dev              # 运行 scripts 里的 dev 命令

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// 根目录的 package.json
{
  "name": "my-monorepo",
  "version": "1.0.0",
  "private": true,
  // 启用 workspaces，指定子项目目录
  "pnpm": {
    "workspaces": [
      "packages/*"     // packages 目录下所有子项目
    ]
  }
}

1
2
3

# pnpm-workspace.yaml
packages:
  - 'packages/*'   # 与 package.json 里的 workspaces 配置保持一致