Dev Voyage

外观

第 2 章：开发环境搭建

约 1689 字大约 6 分钟

2025-11-13

本章学习目标

  • 安装 Node.js 和 pnpm（前端开发环境）
  • 安装 Python 和 PDM（后端开发环境）
  • 配置 VS Code 编辑器
  • 学会 Git 基本操作

照着做就行

本章的内容不需要理解为什么，照着命令敲就行。等你用熟了，自然就明白了。

如果遇到问题，先 Google/必应，而且现在还有 AI，实在不能解决，最后才找大佬。还记得第 0 章说的 STFW 吗？

2.1 Node.js 与 pnpm 安装

这俩是干嘛的？

  • Node.js：让 JavaScript 可以在电脑上运行（不只是浏览器里）
  • pnpm：安装和管理 JavaScript 依赖包的工具，比 npm 更快更省空间

别管那么多，装上就 OK，后面用的时候自然就知道了。

关于 nvm 和 pnpm 的故事

nvm：由 Tim Caswell 于 2010 年创建，灵感来自 Ruby 的 rvm。当时他被"在不同 Node.js 版本之间切换"这个问题搞得很烦，于是自己写了一个工具。

pnpm：由 Zoltan Kochan 于 2016 年创建，核心理念是解决 npm 和 yarn 太浪费磁盘空间的问题。pnpm 用硬链接共享依赖，有时能节省 80% 以上的空间，安装速度也快 2-3 倍。

💻 Windows
# 1. 下载 nvm-windows
# 访问 https://github.com/coreybutler/nvm-windows/releases
# 下载最新的 nvm-setup.exe，运行安装

# 2. 打开新的 PowerShell，验证安装
nvm version

# 3. 安装 Node.js LTS 版本
nvm install lts
nvm use lts

# 4. 验证 Node.js
node --version
npm --version

# 5. 安装 pnpm
npm install -g pnpm
pnpm --version

验证安装成功

运行 node --version 和 pnpm --version 都能输出版本号，说明安装成功。

如果提示"命令不存在"，可能需要重启终端或检查环境变量。

环境变量？这是是什么？

简单来说，环境变量就是系统用来存储信息的一种机制，你可以在系统的任何地方访问到。 在 Windows 上，你可以通过"系统属性"->"高级系统设置"->"环境变量"来查看和修改。 在 macOS/Linux 上，环境变量通常在 shell 配置文件（如 ~/.bashrc 或 ~/.zshrc）中设置。

如果你还是不懂，可以尝试 AI 一下，搜索"什么是环境变量"。

2.2 Python 与 PDM 安装

这俩是干嘛的？

  • Python：后端开发语言
  • PDM：Python 的项目管理工具，管理依赖和虚拟环境

同样，先装了再说。

关于 PDM 的故事

PDM 由中国开发者 Frost Ming（明希） 于 2019 年创建。它是最早完全支持 PEP 621 标准的工具之一，名字最初是 "Python Dependency Manager"，后来功能扩展后改名为 "Python Development Master"。

说到 PDM 的开发者，就不得不提 PyCon China！如果你对 Python 感兴趣，这个活动很值得参加，甚至有可能见到 PDM 的作者本人。近两年活动都在上海对外经贸大学古北校区举办。

💻 Windows
# 1. 先确保有 Python（如果没有，去 https://python.org 下载安装）
python --version

# 2. 安装 PDM
pip install --user pdm

# 3. 验证安装
pdm --version

2.3 VS Code 配置

这个总不需要教吧？

去 https://code.visualstudio.com 下载安装就行。

我就是需要你教！
  1. 打开上面的网址
  2. 点击下载按钮
  3. 运行安装程序
  4. 一路下一步
  5. 完成

2.3.1 必装插件

打开 VS Code，按 Ctrl+Shift+X 打开扩展商店，搜索并安装以下插件：

前端开发：

  • Vue.volar - Vue 3 语言支持
  • bradlc.vscode-tailwindcss - Tailwind CSS 提示

后端开发：

  • ms-python.python - Python 支持
  • ms-python.vscode-pylance - Python 智能提示

通用工具：

  • eamodio.gitlens - Git 增强
  • usernamehw.errorlens - 错误提示直接显示在代码行

可选但推荐

GitHub.copilot - AI 代码补全。如果你有 GitHub 学生认证可以免费用，没有的话可以先跳过。

2.4 Git 基础

Git 是什么？

版本控制工具。简单说就是帮你记录代码的每次修改，可以随时回退，还能和别人协作。

现在只需要会最基本的操作就行，高级用法以后再学。

Git 的故事

Git 是 Linux 之父 Linus Torvalds 在 2005 年用两周时间写出来的。当时 Linux 社区和一个闭源版本控制工具 BitKeeper 闹翻了，Linus 一怒之下自己写了一个。

"Git" 这个名字在英式英语里有"蠢货"的意思。Linus 解释说："我是个自负的混蛋，给项目起这个名字完全合理。"

2.4.1 安装 Git

这个也不需要教吧？

Windows 去 https://git-scm.com 下载安装。 macOS/Linux 一般自带，没有的话用包管理器装。

2.4.2 只需要会这几个命令

# 初始化仓库（在项目目录里执行一次就行）
git init

# 把所有改动加入暂存区
git add .

# 提交改动（message 写你改了什么）
git commit -m "feat: 添加了登录功能"

# 查看当前状态
git status

提交信息格式

推荐用这种格式：类型: 描述

常见类型：

  • feat - 新功能
  • fix - 修 bug
  • docs - 文档
  • style - 格式调整
  • refactor - 重构

例如：feat: 添加用户登录功能

2.4.3 .gitignore 文件

在项目根目录创建 .gitignore 文件，告诉 Git 哪些文件不要管：

# 前端
node_modules/
.nuxt/
.output/
dist/

# 后端
__pycache__/
*.pyc
.env
.venv/

# 通用
.DS_Store
*.log

为什么需要这个？

node_modules 目录通常有几百 MB 甚至几 GB，这些是可以用 pnpm install 重新安装的，没必要提交到仓库。

.env 文件里通常有密码、API 密钥等敏感信息，绝对不能提交！

2.5 小结

本章回顾

  • ✅ Node.js + pnpm：前端开发环境
  • ✅ Python + PDM：后端开发环境
  • ✅ VS Code + 插件：代码编辑器
  • ✅ Git 基础：版本控制

验证清单

在终端运行以下命令，确保都能输出版本号：

node --version
pnpm --version
python --version
pdm --version
git --version

全部通过？恭喜！下一章我们就开始写代码了！🎉