零基础搭建前端开发环境(详细版)

设备：window系统64位

一、谷歌浏览器安装

网址：https://www.google.cn/chrome【国内可访问地址】最好设置为默认浏览器

二、Git安装

1.网址：https://git-scm.com/install/windows

2.安装，双击安装包，点next

可选择安装目录，全英文，无空格

选择安装的组件

安装程序会在"开始菜单"中创建一个叫 Git 的文件夹，里面包含所有 Git 相关的快捷方式

默认编辑器选择

初始化Git的分支名称，选第一个默认是master，选第二个可以自定义设置成main

调整git的环境变量，选默认即可

选择SSH可执行文件，默认即可

选择HTTPS后端传输，无要求选OpenSSL即可

配置行尾符号转换，选默认配置即可

配置终端模拟器

git pull默认行为

配置Git凭证

配置额外选项

安装完成

可以win+R，输入cmd，打开终端，输入命令git --version验证

也可以在文件夹内右键，看看有没有这两项：

三、配置Git

安装完Git，就可以正常使用了，如果想要向远程仓库提交项目，就必须完成全局配置，配置自己在Git中的个人信息

win+R，输入cmd，打开终端，输入：

配置用户名：用户名设置成自己的

git config --global user.name "用户名"

配置邮箱：

git config --global user.email "邮箱"

如图：前两个是配置，后两个是验证命令

三、NVM（node版本管理工具）

作用：管理多个node版本，切换node版本，易于开发，如果不需要多版本管理，可省略，如果已经安装过nodejs，要先卸载node，将配好的环境变量也清除干净。

网址：https://nvm.uihtm.com/

点击这个蓝色的按钮跳转到如下界面，选择最新版本，本地下载按钮，如果想要下载特定版本，选NVM下载想要版本即可，这里我安装的是1.1.12版本。

解压文件夹，双击安装

如图：点击Browse..可以更改文件夹位置，不需要就默认安装在C盘了，然后点Next进入下一步。

这个时候文件路径一定不要选中文，最好建立英文文件路径

这个界面是用来放nodejs的快捷方式，系统会自动把它加到环境变量。

到了这个界面直接点Install安装

这个界面代表安装完成，点finish。

接下来，重启终端，就是把所有命令行窗口彻底关掉，再重新打开，win+R，输入cmd，打开窗口

在新终端里输入nvm version ,有版本号，这样代表环境变量生效

三、更换镜像地址（为了下载依赖速度快）

注：接下来我们是安装node环境，直接用nvm命令就能自动下载并安装node。

我们总是听说要换淘宝镜像之类的话，这个是为了在国内让下载依赖速度更快。

NVM的node/npm镜像：解决的是装node慢。

NPM的registry镜像：解决的是装包慢，以后我们会用npm install xxxxx下载好多依赖包用于项目开发，下面有写。

1.修改nvm镜像：

win+R快捷键打开运行窗口，输入cmd，按Enter回车，打开CMD窗口。

cmd窗口界面：

输入nvm root,会显示 nvm 的安装路径，然后按Enter回车，打开 nvm 安装目录：D:\dev\nvm\nvm，找到 settings.txt 文件，双击打开

把下面内容复制粘贴到文件末尾（覆盖原有内容也可以）改前：

改后：

保存文件并关闭（注意：path 对应之前设置的 Node 符号链接目录，和你安装时一致）

四、nodeJs环境安装

网址：https://nodejs.org/zh-cn【国内可直接访问】

我做vue2、vue3、react的项目，安装16和20版本的node，16支持vue2，20支持vue3和react。

1.安装 Node 16 (Vue 2/若依版)，输入命令：

nvm install 16.20.2

如图：

切换到 16.x 版本（验证是否安装成功），输入命令：

nvm use 16.20.2

成功提示：Now using node v16.20.2 (64-bit)，如图：

验证版本，输入命令：

node -v

出现版本号，安装成功，如图：

2.安装 Node 20.18.3（Vue3/React/ 新项目专用）

安装命令，步骤和上面一样，不重复写了：

nvm install 20.18.3

安装成功后，可以用nvm list查看安装的node版本列表，想用哪个的时候，用 nvm use 版本号 切换就行，比如nvm use 20.18.3

解释说明：

安装node的时候，常常看到文章中说要配置环境变量，我们是用nvm工具安装的node，所以他已经给我们配置好了，不需要手动再次配置了，我们输入nvm use 版本号的那一刻，环境变量就已经在后台生效了。

3.配置 Node 全局镜像（解决包下载慢的问题）

3.1 先切换到 20.18.3，配置镜像

nvm use 20.18.3
# 配置 npm 国内镜像（淘宝源）
npm config set registry https://registry.npmmirror.com
# 验证配置是否生效
npm config get registry

✅ 输出 https://registry.npmmirror.com/ 就是配置成功。

3.2 再切换到 16.20.2，同样配置镜像，或者直接切换到16，输入命令npm config get registry，查询有没有淘宝镜像地址，有的话不用再配了，没有就再配一下。

nvm use 16.20.2
npm config set registry https://registry.npmmirror.com
npm config get registry

五、安装前端核心包管理器pnpm

5.1 pnpm 安装

• 用 npm 装 3 个 Vue 项目，每个项目都会下载一份 Vue、Vite 等依赖，占几百 MB 磁盘；
• 用 pnpm 装同样 3 个项目，依赖只在全局存一份，3 个项目都复用，只占几十 MB，且安装速度快 3-5 倍。
• 装依赖不卡壳：配合淘宝镜像，装 Vue/React/ 若依的依赖几乎是 "秒装"，不会像 npm 那样偶尔卡半天；
• 少踩版本坑 ：pnpm 会严格按照 package.json 安装依赖，避免 npm 常见的 "明明装了依赖却提示找不到" 的问题；
• 和 npm 用法几乎一样 ：不用学新命令，把 npm 换成 pnpm 就行：

npm install → pnpm install

npm run dev → pnpm run dev

npm install -g 包名 → pnpm add -g 包名

因为不同 Node 版本的全局包是隔离的，所以 16.x 和 20.x 都要装一次：

Node 16.x 装 pnpm 8.15.8（兼容版）

Node 20.x 装最新版 pnpm

只需要切换 Node 版本，pnpm 会自动跟着切换

5.2 第一步：先处理 Node 16.20.2（装兼容的旧版 pnpm）

# 1. 切换到 Node 16.20.2
nvm use 16.20.2

# 2. 安装 Node 16.x 兼容的 pnpm 8.x 版本
npm install -g pnpm@8.15.8

# 3. 配置 pnpm 淘宝镜像
pnpm config set registry https://registry.npmmirror.com

# 4. 验证（输出 8.15.8 就成功）
pnpm -v

5.3 第二步：处理 Node 20.18.3（装最新版 pnpm）

# 1. 切换到 Node 20.18.3
nvm use 20.18.3

# 2. 安装最新版 pnpm（兼容 Node 20.x）
npm install -g pnpm

# 3. 配置 pnpm 淘宝镜像
pnpm config set registry https://registry.npmmirror.com

# 4. 验证（输出版本号就成功，比如 10.29.3）
pnpm -v

---

5.4 验证是否全部配置成功

# 切 16.20.2 验证
nvm use 16.20.2
pnpm -v  # 输出 8.15.8

# 切 20.18.3 验证
nvm use 20.18.3
pnpm -v  # 输出最新版（如 10.29.3）

六、编辑器VScode安装

• 官网下载：https://code.visualstudio.com/

七、vscode前端插件

在扩展里安装插件

1.中文（简体）语言包

安装后需重启 VS Code，界面会自动切换为简体中文

1. 点击 VS Code 左侧那一排图标中最下面的**"方块"图标**（Extensions）。

2. 在搜索框输入 Chinese。

3. 检查第一个 Chinese (Simplified) 插件，如果按钮显示是 Uninstall ，说明已经装好了；如果是 Install，请点一下安装。

第二步：强制调出语言切换菜单（最关键）

如果还没变中文，请直接在键盘上按这个：

1. 同时按下：Ctrl + Shift + P （这会打开一个搜索框）。

2. 在这个框里输入：display。

3. 你会看到一个选项叫：Configure Display Language，点击它。

4. 这时候会弹出一个下拉列表，点击 zh-cn（中文简体）。

第三步：点击 Restart（重启）

选完 zh-cn 后，VS Code 的右下角会弹出一个小框，问你是否 Restart（重启）。

• 一定要点那个蓝色按钮！

• 只有点了这个 Restart，它才会重新加载语言引擎，把英文全部换成中文

2.Vue (Official)

Vue 3 的官方引擎。没它，你的 Vue 代码就是一堆没颜色的白字，电脑也看不懂你写的组件。它现在也兼顾了 Vue 2，是目前的"大一统"插件。

注意： 如果搜索结果里有老旧的 Vetur，千万别装，会跟这个冲突。

3.ESLint语法检查器

实时检查代码语法错误（比如少写分号、变量未定义），规范代码风格，有错误项目启动时就会满屏报红，甚至直接挂掉。它能提前告诉你哪里违规了。

4.Prettier - Code formatter 自动格式化代码

自动格式化代码（一键对齐缩进、换行、引号），Vue/React/JS/CSS 都适配

5.Auto Rename Tag 自动重命名闭合标签

前端有很多成对的标签（如 <div></div>）。你想把 div 改成 section 时，它会自动帮你把结尾的那个也改了。省得你改了头忘了尾，导致页面崩溃

6.GitLens --- Git Supercharged

在代码行的行号旁（或点击行时）显示该代码的提交者、提交时间、提交分支 / 提交信息（即你截图中 "xxx，4 个月前・feat/test: ..." 的内容）

7.Path Intellisense

项目里经常要引入图片或别的文件。输入 ./ 它就自动弹窗告诉你有啥文件，不用你翻文件夹去死记文件名

8.ES7+ React/Redux/React-Native snippets

React 代码片段（输入 rcc 生成类组件、rafce 生成函数组件，超高效）

9.git-commit-plugin

自动生成 Git 提交信息（commit message），可自动根据代码变更内容生成提交信息的类型（如feat、fix、docs）、范围和描述，减少手动编写的工作量，同时避免提交信息不规范的问题

10.Tailwind CSS IntelliSense

现在的 Vue 3 和 React 项目非常流行用 Tailwind。这个插件能让你在写样式时，像有"自动联想"一样，输入几个字母就写好漂亮的样式

11.Color Highlight

当你在代码里写一个颜色代码（比如 #ff0000）时，它会直接在这个代码背景上显示出红色。不用靠脑子猜这是什么色，一眼就能看出来

12.Console Ninja

调试网页时，不用频繁切换到浏览器看控制台打印的数据，它能直接在 VS Code 代码行旁边显示输出结果。 减少了切窗口的次数，思路不容易断。

选择免费版 ：点击 Use free version 按钮，即可开始使用基础功能。

八、接口调试工具 Apifox

集接口调试、文档、Mock、自动化测试于一体，支持中文，比 Postman 更适配国内开发场景。

1.官网下载：https://www.apifox.cn/

2. 选择对应系统（Windows），下载后一路「下一步」安装

3. 安装完成后注册账号（免费），登录即可使用

九、远程控制工具

1.ToDesk

免费版支持高清远程、文件传输、剪贴板同步，无连接时长限制，适合远程协助 / 居家办公。

安装步骤：

1. 官网下载：https://www.todesk.com/
2. 下载 Windows 客户端，安装后注册账号；
3. 远程控制：
   • 被控端：打开 ToDesk，复制「设备码 + 临时密码」；
   • 控制端：输入对方的设备码 → 连接 → 输入密码，即可远程操作

2.Live Share

装上这个插件后，可以发一个链接给高手。对方点开链接，直接就能在他的 VS Code 里看到你的代码， 你们俩可以像在同一个文档里打字一样 ，同时改代码，还能看到对方的鼠标在哪。最关键的是： 对方不需要下载你的整个项目，也不需要远程控制你的电脑屏幕，非常安全且丝滑。

完结 撒花！！！啦啦啦啦！！！看到这条的人都发财、开心、万事如意。没看见的也发财、开心、笑口常开。