这篇文章适合所有人，无论你是一个开发小白，还是一个开发老手最近换了一个新电脑。 这些软件最好是按照文档的顺序安装，比如 node 要在安装完 nvm 之后再装，否则就无法用 nvm 管理 node 了。
注意，这篇文章，所有的安装命令可能有局限性，比如有些软件版本更新了，导致了命令的更新，所以在你开始准备安装的时候，最好是去对应软件的官网看一下，以官网的命令为准。
一、工具准备
1.1 Mac 电脑安装 homeBrew
homeBrew 是 maxOS 和Linux 上的一个安装包的工具，比如 Git 、Nginx 都可以使用它安装，所以在开始之前，如果你使用 Mac 电脑一定要安装一下，一劳永逸。 打开启动台 -> 终端 -> 粘贴下面的命令即可。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
详细信息见 homeBrew 官网，如果你无法链接这个网站，试试下面的安装包。
安装完成之后，你在终端输入brew -v，可以打印当前版本，就代表安装成功。
1.2 常用的命令行命令
| 功能 | Mac | Windows |
|---|---|---|
| 清空 | clear | cls |
| 查看目录内容 | ls | dir |
二、开发软件安装
2.1 版本管理
2.1.1 安装 Git
前往 Git 的官方网站，根据官网的教程找到 Windows/Mac 电脑的安装方法。
（1）Windows 电脑安装包
电脑直接下载对应的安装包(.exe)一键安装即可，所以 Git 的本质就是一个安装包！你可以在 Github 上找到它的源码，下面是一个 Git 的下载链接之一。
如果你无法访问这个地址，试试下面的安装包。
（2）Mac 电脑使用命令行安装
前提是你已经安装了 homeBrew 。
打开启动台 -> 终端 -> 粘贴下面的命令即可
brew install git
安装完成之后，你在终端输入git -v，可以打印出当前版本，就代表安装成功。
更多安装方式见 Git 官网
2.1.2 安装 SourceTree
SourceTree 是图形化 Git 管理工具，用于开发过程中仓库代码，当然你可以选择用其他的好用的软件，或者不用，直接使用命令行，看自己习惯。
我个人觉得 SourceTree 还是很好用的，尤其是两个比较好用的功能。
（1）搜索可以精确到文件内容
这个功能的好处是，你可以精确地搜索到某个变量/方法是在哪一个提交，哪一个历史版本改动的，尤其是针对很久之前已下线的功能。
（2）与当前分支对比
有一个 Diff Against Current（当前对比）功能，可以对比两个分支的代码差异，选中一个分支，然后右键，出现菜单如下图。
这个功能的好处是，在你合并某个分支，解决了冲突之后，可以二次确认冲突解决的是否正确，避免某些代码被合并丢。
（3）Windows 电脑安装包
product-downloads.atlassian.com/software/so…
Windows 电脑安装包备份。
SourceTreeSetup-3.4.26 (1).exe.zip
（4）Mac 电脑安装包
product-downloads.atlassian.com/software/so…
Mac 电脑安装包备份。
最新下载安装地址见 SourceTree 官网
2.2 Node 环境
注意，一定要现状 nvm 再安装 Node，才能使用 nvm 管理 Node。
2.2.1 nvm 安装
| 网站 | 地址 |
|---|---|
| Github 地址 | github.com/nvm-sh/nvm |
| nvm 中文网下载地址 | nvm.uihtm.com/doc/downloa… |
| nvm 官网 | www.nvmnode.com/ |
安装 nvm 之前需要卸载当前的所有的 Node 版本。
（1）Windows 电脑安装包
Windows 电脑安装包备份。
（2）Mac 电脑命令行安装
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
（3）常用的 nvm 命令
nvm -v查看当前版本nvm ls查看所有已安装的/当前选中的 Node 版本nvm install 版本号安装指定版本的 Nodenvm use 版本号切换到已安装的指定版本号
（4）注意事项
- 注意
nvm use 12这样切换版本在 Mac 上可以，Windows 不行；Windows 必须使用 nvm use v12.1.1 这样具体的版本格式切换 Node 版本 nvm use xx这个命令在 windows 电脑上必须使用管理员身份运行命令行，否则会报错；Windows 电脑上 VS Code 设置以管理员方式打开，那么就可以再 VS Code 的终端使用nvm use命令了。
2.2.2 Node 安装
有了 nvm 之后，Node 的安装和切换都变得极其简单直接使用 nvm 相关命令就行，可以自行去 Node 的官网查看相关文档。
如下图所示，你可以 nvm ls 查看当前已经安装的 Node 版本，然后安装你想要的版本如 22 Mac 电脑就使用 npm i 22 即可。
但是如果你是 Windows 电脑，你可能需要精确到具体的版本号，可以去 Node 官方 release 地址查看可以下载的版本号，或者去 Node 官网的下载模块查看，如下图：
2.2.3 只下载偶数版本
你有没有注意到所有的项目用的 Node 版本都是偶数，14、16、18、20，那么奇数版本咋不用，这个问题曾经迷惑了我一段时间。
我们去 Node 官网的 Node.js 版本的模块，有相关说明，
（1）奇数版本
概括来说奇数版本是过了当前版本的 6 个月，就不再修复新的 Bug 了，奇数版本是供工具的开发者使用的，以便他们兼容新版本的 Node 的。
（2）偶数版本
偶数版本会在 30 个月（2年多的）维护阶段，这两年期间，出现的所有的重要的 Bug 都会被修复，所以作为一个普通的打工人，都是使用稳定的偶数的版本，
2.2.4 安装 nrm 镜像管理
使用 nrm 进行镜像管理，有的时候一个镜像很慢，我们通过 nrm 可以快速的切换，你安装完 node 之后，直接使用 npm 命令全局安装即可。
npm install nrm -g
安装之后，使用nrm ls和 nrm use查看和切换即可。
2.3 开发软件
2.3.1 安装 VS Code
去 VS Code 官网安装对应的安装包。
Windows 电脑安装包备份。
VSCodeUserSetup-arm64-1.105.1.exe.zip
Mac 电脑安装包备份。
2.3.2 VS Code 插件
按需安装 VS Code 插件，但是下面几个是我建议必须安装的。一定要按照下面的截图安装，有很多名称类似的，但是不咋好用。
2.3.3 其他开发工具
最近比较火爆的 AI 变成工具可以按需安装，Trae、Cursor。
（1）Trae
Windows 电脑安装包备份。
Mac 电脑安装包备份。
（2） Cursor
Windows 电脑安装包备份。
CursorSetup-x64-1.7.54.exe.zip
Mac 电脑安装包备份。
2.4 调试工具
2.4.1 浏览器
开发过程中，我们一般都是使用 Chrome 由于它太好用了，所以可能会让我们忽略一些其他浏览器的兼容问题。有两个前端开发必须要安装的浏览器，且每次做完页面最好是都在这些浏览器看一下我们的页面适配情况，虽然已经没有 IE 的困扰了，但是这些主流浏览器还是有一些细微的差距。
（1）Chrome 浏览器
使用 Google 官网下载浏览器，如果你无法访问这个地址，可以使用我这个安装包
Windows 电脑安装包备份。
x86_141.0.7390.123_chrome_installer_uncompressed.exe.zip
Mac 电脑安装包备份。
（2）Firefox 火狐浏览器
Firefox 官网下载浏览器。
Windows 版本安装包备份。
Mac 版本安装包备份。
（3）Safari 浏览器
Safari 浏览器无需下载，但是在这里提到是为了说明它很重要，有些样式需要单独兼容，而且如果你使用了 Windows 电脑也无需费心思找 Safari 的 Windows 版本，因为即便是这种兼容版本也和原生的浏览器有差异。
（4）Edge 浏览器
Edge 是 Windows 里默认的浏览器，微软提供 Mac 版本的 Edge 版本，但是我还是建议在真正的 Windows 电脑上的 Edge 去做样式兼容。
2.4.2 Chrome 浏览器工具
（1）修改默认搜索引擎
将浏览器地址栏的搜索引擎改成 Google、或者 Bing，不要用 Baidu.
（2）广告屏蔽插件
安装广告屏蔽插件，在你访问一下有很多无良小广告的网站，可以避免很多尴尬，可以去 Chrome 商店下载。但是注意，有的时候浏览器插件会我们的网页打印一些奇怪的日志，并且可能会影响页面功能，所以在开发的时候可以在我们的网站域名禁用这个插件。
（3）书签同步
很多网站我们没有统一的管理，根本记不住，所以我们在换电脑之前，需要把书签导出一下，如果你能正常登录谷歌账号，就直接使用 Chrome 浏览器的同步功能就行。对于无法登录谷歌账号的，可以手动导出书签
打开书签管理器（chrome://bookmarks/）-> 右上角菜单 -> 导出/导入书签
导出的文件是一个名字诸如bookmarks_2025_10_23.html的文件，在你的新电脑上使用同样的方法导入即可
（4）Chrome 工具地址
你有没有注意到，Chrome 所有设置页面的地址都是以 chrome:// 作为前缀的，比如
- 书签：
chrome://bookmarks - 设置：
chrome://settings - 插件：
chrome://extensions
所以有的时候我们都不用去右上角菜单中找我们想去的页面，直接在地址栏输入地址就可以，很方便
2.5 接口请求工具
2.5.1 抓包工具 Whistle
抓包工具是经常会用到的但是很多都收费，所以建议使用 whistle 免费好用，也可以移动端抓包。其实开发 web 应用一般用不到这个，但是如果是开发移动端和小程序之类的，抓包工具就很有用了。
操作指南见 Whistle 官方文档。
2.5.2 接口调试 Apifox
去 Apifox 官网下载并安装 Apifox 等接口 Mock 工具， 也可以使用任何你喜欢的工具，比如 Postman 等。
Windows 版本安装包备份。
Mac 版本安装包备份。
Apifox-macOS-arm64-2.7.44.dmg.zip
2.5.3 Nginx
去 Nginx 官网查看各平台安装方法，一般是解压就能用的，同时官网还提供了很详细的新手教程，可以自己按照 Beginner's Guide 手册实际操作一番，你基本上就会知道它有什么用，怎么用了。
在我们实际开发中具体怎么用，我会在后面章节详细地介绍。
安装包备份。
三、效率工具
3.1 窗口分割工具
使用现成的窗口分割工具，省得我们手动调整浏览器大小。
3.1.1 PowerToys
Windows 电脑建议安装微软自带的软件 PowerToys。
3.1.2 Rectangle
Mac 电脑建议使用 Rectangle
安装包备份。
3.2 解压软件
3.2.1 7zip 官网
如果你是 Windows 电脑 7z 格式的压缩包可能无法直接解压，一定要去 7-zip 官网安装！
安装包备份。
3.3 截屏软件
3.3.1 Mac 电脑安装 iShot
直接去 AppStore 搜索安装即可，很好用的截图工具，在我们写文档或者和测试解释 Bug 的时候很好用。
好了，恭喜你已经具备当牛马的客观条件了，准备开始写 Bug 吧！
