前端开发的基本运行环境配置

声明：本文只作学习研究，禁止用于非法用途，否则后果自负，如有侵权，请告知删除谢谢

💓 博客主页：这个头像胖嘟嘟

⏩ 收录文章：写文章-CSDN创作中心（前端开发的基本运行环境配置）

🎉欢迎大家点赞👍评论📝收藏⭐文章

简介

工欲善其事，必先利其器。一个好的开发环境可以让我们更容易进行代码的编辑与问题的查找。所以，在开始学习撸码之前，我们需要先配置好工作环境。本节课内容是为了更好的进行日常开发工作，属于常用但并不是必须了解，所以，请一定要在今天的课程之内将你所有的环境配置完成！

在开始一切操作之前，请伪装一下你的专业性，工作路径中的目录名应该都是由英文单词构成而且符合项目语义！然后，如果你是 windows 用户，将你的工作目录设定在 c 盘或 d 盘根路径下；如果你是 osx 用户，可以在桌面直接建立一个工作目录，并将其命名为 Example 或 Workspace。这样可以尽量避免我们在开发的过程中会遇上的一些因为中文路径而导致的奇怪且棘手的问题 。不要花时间去学习解决这种没有普适性的问题，人的精力是有限的，没必要浪费在这里。

目录

简介

[一、代码编写工具 VsCode](#一、代码编写工具 VsCode)

二、Git安装和使用

一、下载安装Git

二、Git基本工作流程

三、Git初始化及仓库创建和操作

四、Git管理远程仓库

五、Git克隆操作

三、NVM安装

[一、代码运行环境 Node](#一、代码运行环境 Node)

[二、NodeJs 入门教程](#二、NodeJs 入门教程)

三、相关应用下载

[四、管理 npm 镜像库工具 nrm 的安装与使用](#四、管理 npm 镜像库工具 nrm 的安装与使用)

---

一、代码编写工具 VsCode

vscode，全称 Visual Studio Code，基于 Electron 与 Javascript 开发的代码编辑器，目前是前端使用最多的一款代码编辑器下载地址

注意：如果你是 windows 用户，一定要使用管理员权限开启 vscode，因为在 windows 下因为很多操作都需要管理员权限，所以将 vscode 设置为管理员权限启动可以避免很多因为权限不足而造成的问题。

另外，vscode 下的终端也是需要权限的。一般来说，vscode 会将你系统中所有的命令行工具读进来，这里我建议你们使用 powershell，powershell 是微软开发的一款用于编辑复杂脚本的命令行工具。如果觉得系统的 1.x 版本不够用，我在下面还给出了 powershell 7 的安装和配置方式，你们可以在课后自己安装和配置。

通过修改 powershell 的执行策略来获取管理员权限

// 获取当前执行策略
Get
-
ExecutionPolicy
// 修改当前执行策略
Set
-
ExecutionPolicy unrestricted

|--------------|-------------------------------------|
| 描述 | 功能 |
| Restricted | 默认设置，不允许任何脚本运行 |
| AllSigned | 只能运行经过数字证书签名的脚本 |
| RemoteSigned | 运行本地脚本不需要数字签名，但是运行从网络上下载的脚本必须要有数字签名 |
| Unrestricted | 允许所有的脚本运行, 但是在运行前会提示是否进行操作 |
| Bypass | 允许所有的脚本运行, 没有任何的提示和警告 |

配置一个养眼的代码环境

这块不强制安装，下课后有时间可以自己安装，如果遇到问题可以百度，百度解决不了的我们自习课再研究:

windows 用户看这里：windows 下安装 iterm 及 pownshell 7 osx 用户看这里：mac 系统下安装 iterm

vscode 常用插件

vscode 只提供了一个基础的代码编辑环境，所以我们还需要安装一些插件才能更好地使用它：vscode 常用插件与使用

二、Git安装和使用

实际项目开发中，我们经常会用一些版本控制器来托管自己的代码，今天就来总结下Git的相关用法，废话不多说，直接开写。

目的：通过Git管理github托管项目代码

Git - 下载软件包 - Git 版本控制系统

①百度选择选择一个靠谱的点击下载，下载在cmd里面进行下载，注意要以管理员的身份运行cmd否则git下载不下来

②下载完以后查看下载是否完成查看版本

查看配置链接

注意要以管理员的身份运行cmd否则git下载不下来

接着下载nvm,下载nvm以后可能系统高级配置识别不了导致不可用，要查看官网，找到下载的命令下载，再再网上查看是否有最简单的包方法，下载一个自动配置好的，配置完以后同样的还是查看版本是否正确

https://nvm.uihtm.com/doc/download-nvm.html
下载好的可使用的zip压缩包

https://www.cnblogs.com/mike-mei/p/19325283

所需链接

https://nvm.uihtm.com/doc/download-nvm.html

https://www.cnblogs.com/mike-mei/p/19325283

压缩包 下 载好的可使用的zip压缩包

①下载完成以后，要npm i下载项目的依赖包，不下载依赖包项目无法启动

②下载完再从新启动一下，找到需要打开的项目，在项目对应的cmd区输入命令

③查看启动命令，启动项目 京东的镜像源http://registry.m.jd.com

ext.xiaodudu1@jd.com

8A34354544wewerr

一、下载安装Git

1、下载Git 官方地址为：https://git-scm.com/download/win

2、下载完之后，双击安装

3、选择安装目录

4、选择组件

5、开始菜单目录名设置

6、选择使用命令行环境

7、以下三步默认，直接点击下一步

8、安装完成

9、检验是否安装成功

回到电脑桌面，鼠标右击如果看到有两个git单词则安装成功

二、Git基本工作流程

2、向仓库中添加文件流程

三、Git初始化及仓库创建和操作

1、Git安装之后需要进行一些基本信息设置

a、设置用户名：git config -- global user.name '你再github上注册的用户名';

b、设置用户邮箱：git config -- global user.email '注册时候的邮箱';

注意：该配置会在github主页上显示谁提交了该文件

c、配置ok之后，我们用如下命令来看看是否配置成功

git config --list

注意：git config --global 参数，有了这个参数表示你这台机器上所有的git仓库都会使用这个配置，当然你也可以对某个仓库指定不同的用户名和邮箱
2、初始化一个新的git仓库　
a、创建文件夹

**　方法一：可以鼠标右击-》点击新建文件夹test1
　　　　方法二：使用git新建：$ mkdir test1**

b、在文件内初始化git（创建git仓库）

方法一：直接输入 cd test1 方法一：点击test1文件下进去之后-》鼠标右击选择Git Bash Here-\>输入 git int

3、向仓库中添加文件

方法一：用打开编辑器新建index.html文件　　
方法二：使用git命令。 touch '文件名'，然后把文件通过 git add '文件名'添加到暂存区，最后提交操作

4、修改仓库文件

方法一：用编辑器打开index.html进行修改　　
方法二：使用git命令。$ vi '文件名'，然后在中间写内容，最后提交操作

5、删除仓库文件
　　方法一：在编辑器中直接把要删除的文件删除掉
　　方法二：使用git删除：$ git rm '文件名'，然后提交操作

四、Git管理远程仓库

1、使用远程仓库的目的 ：备份、实现代码共享集中化管理

Git远程仓库实际上就是保持在服务器上的git仓库文件

五、Git克隆操作

目的：将远程仓库（github上对应的项目）复制到本地
1、代码：git clone 仓库地址

仓库地址由来如下：

2、克隆项目

3、将本地仓库同步到git远程仓库中：git push

期间出现错误的情况有：

a、出现提交错误

解决：这是通过Git GUI进行提交时发生的错误，由 .git 文件夹中的文件被设为"只读"所致，将 .git 文件夹下的所有文件、文件夹及其子文件的只读属性去掉即可。

b、如果出现无法同步或没有权限，解决方法如下：

用户名和密码一定要和github上的一致。

三、NVM安装

**一、**代码运行环境 Node

Node.js 是一个开源和跨平台的 JavaScript 运行时环境，NodeJs 可以在浏览器之外运行 V8 JavaScript 引擎（Google Chrome 的内核）。简单来说，就是 NodeJS 可以让我们用 JavaScript 来搭建一个可独立运行的项目。目前来看，我们前端在开发时的代码运行环境暂时以 NodeJs 为主，如果需要使用其它后端语言则需要安装更庞大的 Ide 与服务器体系，比如 java + Idea 或 php + eclipse。

注：IDE：Integrated Development Environment 集成开发环境，比如 IDEA，当下最流行的 java 开发环境；eclipse，老牌的集成开发环境。

因为 NodeJS 的相关知识量比较庞大，为了节约时间，我在这里就不详细讲解了，下面给出了 NodeJs 官方文档的地址，希望大家在有时间的时候都去学一下，这对于我们未来的职业规划和发展来说，是属于非常重要的一部分。进，可以成为全栈；退，也能增加在日常工作中对后端同事代码的理解能力。

二、NodeJs 入门教程

node 版本管理工具 nvm 的安装与使用

记住，公司配给你的电脑到手以后第一件事绝不是使用 nodejs 官网下载的安装包来安装 node!!! 而是先安装 nvm，然后使用 nvm 来安装 node!!!

nvm 则是用来管理 nodejs 版本的管理工具，我们之中有很多人，都是直接上 nodejs 官网上下载 node 安装包进行安装。但在实际业务中这样是行不通的，因为我们无法保证自己接手维护的项目是最新的项目，极有可能这个项目已经开发完成很久了，比如一个 16 年建的项目，它可能还在正常运行，也没什么大毛病，但当你需要维护它的时候你就会发现：它无法兼容于现有的 node 版本。所以这时候我们就需要一个工具，可以对开发环境的 node 版本作一个快速的切换。nvm 就是用于管理 nodejs 版本的管理工具。
nvm 链接地址：https://github.com/coreybutler/nvm-windows/releases

windows 环境推荐下载第三个，nvm-setup.zip

三、相关应用下载

因为国内网络对于 github 不是很友好，我将初始化开发环境的相关应用都转到了我的网盘，提取码是 z6xe，可能你们看到这篇文档时已经无法下载或版本过时了，那么就参考上面的地址，自己去下载吧。

注意：因为我的学员使用 mac 的人数较少，mac 下的安装参考这篇文档, 此处就不再赘述。

如果你之前安装过 nodejs，那么现在安装 nvm 会稍有些麻烦，未安装过的同学可以跳过下面这一段直接开始安装！

1.使用系统管理工具卸载 nodejs
2.检查 c 盘根目录下是否有残留 node 相关文件目录
3.检查系统环境变量中是否残留 node 相关配置
4.重启系统
附：环境变量的修改方法（win10）：左下角放大镜 => 输入"编辑账户的环境变量"

一切就绪后，双击下载完成的 nvm 安装文件运行，要注意的是，nvm 默认安装在 c 盘 program files 目录下，但它自己又无法识别带有空格的文件路径，所以，我们需要将 nvm 安装在根目录或指定不包含中文和空格的文件夹下。

安装完成后，在你的桌面上空白处右键选择 open in window terminal as administrator，打开你的 powershell 界面，如果没有 terminal，可以使用 cmd 或 vscode 都行，检查一下 nvm 的版本号：

nvm version

应该可以看到关于 npm 等软件的版本号，这就证明你的 nvm 安装成功了。
使用 nvm 安装和切换 node 环境
nvm 与 npm 或 yarn 一样，需要配置指定的库，如果没有配置，则可能会出现一些比如 timeout 等问题，所以我们需要配置安装路径到 taobao 的镜像库。
找到你的 nvm 安装文件夹，打开 settings 文件，在文件最后输入：

node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
// 上面两行代码的意思是将node的镜像和npm的镜像都指向淘宝，mirror的意思是镜像的意思，在这里指获取应用的仓库

然后执行 nvm list available 命令，检索远端服务器可安装的 node 版本。因为我们是学习，所以，就以目前较稳定的 14.16.1 为例。

查看远程可安装版本

nvm install 14.16.1

windows 系统同学在安装时需要注意观察控制台输出的内容，node 与 npm 两个是分开安装的，可能会因为各种原因存在安装失败的提示，如果有任意一个应用安装失败，就必须使用 uninstall 命令卸载当前版本后重新安装。

安装完成之后，使用 use 命令应用/切换：

nvm use 14.16.1

然后在你的 powershell 或 cmd 中输入：

node - v;
npm 
- v;

如果都能正常显示版本号，证明你的 node 也安装完成了。如果不能正常显示版本号，那么可能是你的 node 配置未能自动生效，可能就需要进行一些比较麻烦的排错处理。

排错

1. 检查.npmrm 文件，是否有内容指向非 Node 安装目录，如果有则删除

2. 检查环境变量，node 和 npm 的 path 指向是否正确

3. 检查 settings 文件，path 指向是否正确

nvm 常用命令

|--------------------|----------------------------|
| 指令 | 功能 |
| nvm list | 查看本地已安装的 node 版本 |
| nvm list available | 查看远程可安装的 node 版本 |
| nvm install | 安装指定版本的 nodejs |
| nvm uninstall | 卸载指定版本的 nodejs |
| nvm use | 使用指定的 nodejs 版本为当前 node 环境 |

注意，上面的 "node version"表示的是 node 版本号，比如：

nvm install 16.14.2 // 表示安装16.14.2版本的nodejs到你的系统
nvm use 
16.14.2 // 表示我们切换node环境到16.14.2版本

注意，如非必要，请尽量安装的 LTS 版本，LTS 表示经过比较多的测试确认没明显 BUG，可以推荐给大多数用户使用；而 CURRENT 版本表示仅小范围测试通过，可能还会存在一些问题！

四、管理 npm 镜像库工具 nrm 的安装与使用

nrm 是一个 npm 镜像管理工具，使用它可以快速切换 npm 镜像。当然，不使用 nrm 也可以切换镜像库地址：
• 检查你的 npm 的镜像地址

npm config get
 registry
// 这行代码的意思是从 npm 的 config（配置文件）中获取 registry 属性所对应的值
// 如果显示 http://registry.npmjs.org/ 这是npm默认的安装包存储地址
// 执行 npm config set registry https://registry.npm.taobao.org 即可将镜像库地址切换到 taobao

因为国内的网络环境访问境外资源时网速真的是很让人难受。所以，我们需要一个工具能像 nvm 那样，可以方便地对 npm 的镜像库进行管理。比如 nrm：首先全局安装一个 nrm

// 全局安装nrm
npm i 
-
g nrm
// 如果是mac系统可能需要使用sudo来启动超级管理员身份
sudo npm i 
-
g nrm
// 使用sudo命令时需要输入密码，要注意的是，osx的终端下输入密码是不可见且不可修改的，所以一定要保证你的输入法是英文

常用 nrm 指令

|----------------|--------------|
| 指令 | 功能 |
| nrm -V | 检查版本号 |
| nrm ls | 获取代码仓库的镜像 |
| nrm test | 测试代码仓库的响应时间 |
| nrm use npm | 切换仓库到 npm |
| nrm use taobao | 切换仓库到 taobao |

nrm 相对来说比较好装，install 命令执行完成后就可以使用了，安装完成后我们先看看有哪些镜像库可以使用

// 打印当前可用npm镜像列表
nrm ls

然后使用这个命令切换镜像库

// 切换npm镜像地址到淘宝