前端环境配置（非常详细）零基础入门到精通，收藏这篇就够了

原创于 2026-01-01 05:15:00 发布 · 416 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

计算机同时被 3 个专栏收录

1979 篇文章

订阅专栏

程序员

1978 篇文章

订阅专栏

前端

153 篇文章

订阅专栏

一、前言

拿到一台新电脑，该如何配置电脑前端开发环境和下载哪些软件呢

二、(VSCode) 前端必备编译器

下载地址：Visual Studio Code - Code Editing. Redefined

vscode常用的拓展插件：

# Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

# GitLens – Git supercharged

# Live Server

# CSS Peek

# vscode-icons

# Console Niaja

# Auto Close Tag

# change-case

# Path Intellisense

# Prettier - Code formatter

# Vetur

# ESLint

# Vue - Offcial

# Vue VSCode Snippets

# Vue 3 Snippets

三、(google) 前端必备浏览器

下载地址：Google Chrome 网络浏览器

在Chrome应用商店里可以安装自己觉得好用的插件。

但是！！！ 一般需要梯子进行代理才能访问。

四、(node.js) 前端必备开发环境

在这里不推荐直接去node.js官网去下载，因为后期开发过程中需要切换node版本时很不方便。

强烈推荐使用nvm！！！


nvm 全称 node.js version management，翻译过来也就是nodejs的版本管理工具。
通过它可以安装和切换不同版本的nodejs。

先下载安装nvm，再去通过nvm安装需要的node版本。

**优点：**可以同时下载多个node版本，通过命令随时可切换需要使用的node版本。

=========================================================================

安装nvm

github地址：https://github.com/coreybutler/nvm-windows/releases

点击链接，去github上下载 nvm。找到 Assets下的 nvm-setup.zip 点击下载。

下载完成解压后，双击nvm安装路径下的应用程序 nvm.exe

选择 nvm 安装路径，注意路径不要有中文和空格。
在这里插入图片描述
点击next，选择nodejs的安装路径。

点击next，等待安装完成。

按住键盘 win + r 后输入 cmd 打开终端，输入 nvm version ，显示版本号即说明安装成功了。

此时建议找到nvm安装路径下的”settings.txt“文件。

打开 txt 文件，复制下面两行地址，粘贴到"settings.txt"，用来设置下载nodejs的镜像(更快速)

node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

接下来就可以下载node了，在终端输入 nvm list available ，查看可以安装的node版本列表。

选择一个版本进行安装，比如 nvm install 16.18.0

如果要使用这个node版本，输入命令 nvm use 16.18.0 即可。

输入node -v 可查询当前使用的node版本。

输入npm -v 可查询当前使用的node版本对应的npm版本。

输入node list 可查询已经安装的node版本，* 号则表示当前使用的node版本。

五、Git 的安装

Git官网下载地址为 Git。(下载会限速，特别慢)

推荐去国内镜像地址下载 CNPM Binaries Mirror。

我下载的版本是 Git- 2.18.1-64-bit.exe ，具体要下载什么版本看个人需求。

下载完成后，双击 Git- 2.18.1-64-bit.exe 应用程序。

下面简单粗暴，跟着下图无脑操作即可。

请忽视我没有弹出让选择安装目录的窗口。

一般第一次安装都会弹出让选择安装目录的窗口，选择要安装的目录即可，尽量不要安装在C盘。

接下来等待安装成功即可。

点击Finsh完成安装即可。

安装成功后，开始菜单里会出现这些。

在文件夹中 点击鼠标右键 会出现 Open Git Bash here

点击 Open Git Bash here 会出现终端窗口，一般用来拉取，提交git仓库项目代码。

接下来进行设置 Git 用户名和邮箱！！！

打开存放项目的文件夹，按住键盘shift和鼠标右键 打开终端

输入下面命令

git config --global user.name “xxxxxx” //设置你的名字

git config --global user.email “xxxxxx” //设置你的邮箱

入职后公司一般会给创建一个工作用的邮箱和git账户，同时这个邮箱会跟这个git账户绑定

那么上面命令设置的名字一般设置git账号名即可。

设置的邮箱也是设置跟git账号绑定的邮箱。