前端环境搭建一览记录

写在前面

我们每次更新设备之后搭建环境都是一件很头疼的事情，今天我把前端可以用到的环境配置统一总结一下，可以利用该步骤进行搭建前端的开发环境，尽快介入开发，大概包括常用的软件，工具包，配置等，每一个我都尽量介绍他的优劣。以下所有示例均为macM3pro的芯片为准

Nodejs下载

Nodejs介绍

Nodejs是前端服务型项目（需要本地启动服务进行展示）运行的环境平台，你可以简单的将它理解为java中的jvm（jvm致力于在任何地方运行java代码，nodejs致力于在任何地方运行js），当然如果你不是SPA（单页面）框架应用开发，只是简单的H5开发的话，可以不用安装Nodejs，当时目前可能只有一些政府类型的项目不用服务型，其他的基本上都是此类项目，所以Nodejs属于是前端必备了

Nodejs下载方式

• 方式一： 官网下载 （新手建议）

官网下载，下载LTS（任意都可以，尽量用最后一个LTS）的版本，也就是长期支持的版本，截稿为止最新的是22.9.0，但是一般情况下我们往前两个版本是最好用的，因为node的版本较新，相对应需要的插件包就要求较高，追求稳定的情况下，一般使用最新版本的前两个版本是最好的，旧版本第一是稳定，第二是如果有遇到不兼容的包，也可以求助网友找到解决方案，如果你不是一个比较资深或者对nodejs颇有研究的人，一般不建议做第一次吃螃蟹的人。

下载安装步骤：

• 下载结束，直接点击安装就可以，他就是一个普通的软件，和我们平常安装软件过程是一样的
• 验证是否安装成功：终端中输入node 如果是我下面截图这样，说明安装成功了

• 方式二： nvm下载（老手建议）

首先说一下nvm是什么，nvm是node版本管理器，也就是我们可以使用nvm安装不同的node版本，因为不同的前端项目用的第三方的开发包是不一样的，那么对node版本的要求也是不一样的，一般相对大型的项目对于第三方的包版本也都是锁定的，那么他就会对node版本要求比较严格，所以我们本地需要有几套node的不同版本，比如项目a用的是node14的版本，项目b用的是node16的版本等，这个时候我们总不能每次开发不同的项目都卸载node进行处理吧（当然你可以这么做，不嫌麻烦的话），像我每天同步开发的项目可能都有好几个，对node的版本要求还都不一样，那我岂不是无法开发了，这个时候就需要使用一个工具替我们管理node的版本，nvm就是做这个事情的，当我们打开项目a的时候，我们可以使用nvm切换到14的版本，项目b的时候切换到16的版本，这样就可以完美解决项目针对不同版本的要求问题

nvm安装:

安装Homebrew（安装器）(打开终端，输入下面的脚本)

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安装nvm

brew install nvm

验证安装是否成功

nvm ls

配置环境内容

// 打开 ~/.bash_profile 文件，将下面内容复制进去
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

查看环境内容

刷新配置

source ~/.bash_profile

nvm 使用

如何使用

nvm help // 查看命令

nvm ls 查看当前安装的版本

nvm use versionId 切换版本

nvm install versionId 安装需要的版本

nvm alias default versionId 设置默认打开终端使用的版本

nvm说明

配置就结束了，如果你是一个刚开始从事前端开发的人，可以使用第一个方式进行安装nodejs，如果你是一个从事了一年以上的前端开发，我都建议使用第二种方式进行处理，因为你大概率同时开发的前端项目不会是一个，所以对于不同的node版本要求需要不停的切换，这里有一个需要注意的点，这里的nvm use 版本之后，是针对当前终端的，也就是说，如果你设置了默认的版本为18，那么你当前的终端打开就是18的版本，除非你nvm use 切换了版本，再次打开终端，他还是18，所以设置一个默认版本一定是你经常用到的版本，避免不必要的频繁切换。

vscode

vscode介绍

上面第一步我们将node环境搭建好了，这个时候我们需要进行开发，需要一个编辑器，也就是我们使用工具进行编写代码，当然像那些上来就说大神都是用记事本的人我也不反驳，这种装逼仔我是懒得理的，现实中我是没有见过一个使用记事本开发代码的，我上次用记事本编写代码还是我写c和java的时候，想知道他的编译过程，用了几次，之后再也没有用过任何一次，这种人现实中就直接拉黑就行了，一定是不咋写代码的人，vscode是一款代码编辑器，这里需要简单说一下Visual Studio 和 Visual Studio Code的区别，很多人都傻傻分不清，Visual Studio 是微软的开发c和c++的具备编译c语言能力的编辑器，他是写c或者c++的，Visual Studio Code 是独立的源代码编辑器，用来开发常见的一些语言的，一般用于web开发。当然它强大之处在于它可以写的语言很多，甚至是python，（可以写但是不建议，python或者java这种还是用各自的pycharm或者java的ide去写比较好，用vscode需要安装对应的插件，编译效果也不理想）介绍完了之后我们开始下载安装vscode

下载安装

vscode安装地址
这就是一个常规的软件，下载好之后就是一个可执行文件，直接保存到本地即可执行。

Git

Git介绍

既然选择看这篇文章，Git基本上也可以不咋介绍，但是考虑到有小白存在，这里简单的说一下，Git是一款代码管理工具，我们写的代码需要进行统一的管理，管理包括两部分，存储和协作，存储就是代码放到什么位置，协作就是一个项目同时会有几个人开发（如果就你自己我表示同情，但是也说明你很厉害），怎么做到代码可以同步给几个开发者呢，Git就是做这个事情的，首先说存储，Git对应的是远程的一个Git仓库，Github就是一个远程的仓库（Gitee同理，不做介绍），大家的代码都在里面，（那岂不是都可以看到？仓库分为公有和私有仓库，一般公司的都是私有仓库，别人是看不到的），为什么要远程不保存本地呢，有一些公司是本地搭建了一个代码仓库，可以保存到公司内部，但是也绝对不会保存在开发者的电脑上，因为这太不稳定了，你的电脑坏了，公司项目岂不是完了，所以一般都是放到远程的仓库里面，该仓库有公开的源代码，别人写好的，你可以直接clone下来使用，协作是指Git可以用自己的分支开发代码，分支就是一个代码开发标识，你用你的分支开发，他用他的分支开发， 同时开发一个项目，大家互相不干扰，后面需要集成功能的时候将代码合并到一起即可，这里合并的时候会有概率出现冲突，所谓的冲突就是你也开发了a模块，他也写了a模块，虽然写的是a模块里面不同的部分，但是有代码重合了，这个时候就需要你们商量保留谁写的，还是都要，这个过程就是解决冲突的过程，解决完了之后你们俩的代码就都在上面的，开发的过程就是这样，Git大概就这个作用，当然这是Git的基本功能，像版本回退，版本管理，分支管理，权限管理等等开发过程中慢慢的就熟悉了。

Git 下载

GIt下载地址
下载结束直接一步一步安装即可，安装结束，终端输入git 看到如下说明安装成功了

工具包管理

npm

npm介绍

npm 是一个包的安装器，这个包的概念你可以简单的理解为一个具有一定功能的代码集，你用他的包之后就可以不用写一写功能性的代码，前端在开发的过程中，很多功能是别人已经开发好的，代码开发过程中有一个原则叫作DRY原则，就是dont repeat yourself，不要重复你自己，写代码是一个脑力劳动，很多偏偏做成了体力劳动，甚至有的人将自己一天写的代码行数作为自己的成就，大多数时候我们的需求是用不到很大量代码的，如果你写的很多，不排除功能太复杂，但是也有很大概率是你没有想好就开始写了，没有做比较好的设计，导致写的过于臃肿，很多功能模块都是相似的，那么就会有一些开发者将功能集成到一个工具方法中，发布到一个地方，大家都可以拿来用，这个地方就是远程仓库，这个仓库和Git的远程仓库不是一个概念，虽然做的事是同一个，但是Git保存的代码是项目代码，而npm源保存的是偏向功能性的代码，比如开发一个红包雨，生成一张海报等，比如，你需要开发一个生成二维码的功能，后端给你链接，你需要将链接生成一个二维码展示出来，正常不用包是拿到链接，使用一些二维码的规则将内容替换掉，这个功能开发起来是还是有很大难度的，但是如果你是用别人开发好的比如qrCode工具包，就可以直接按照他的参数传值即可，代码出现问题的概率也会很低，这就是包的概念，但是别人的包你怎么用呢？npm就是做这个事情的，可以将别人的包拿过来给我们用,

npm安装

npm安装： npm本身是不需要安装的，他是跟nodejs走的，也就是说你安装了nodejs之后，npm就已经安装好了，不同的node版本对应的npm版本也是不一样的，不同的npm版本安装的第三方包的版本也是不安全一样的，

npm 使用

需要的包可以在这里搜索npm官网 用qrcode举例子
打开官网：搜索qrcode

npm install packageName

这里解释一下-g 和 --save ，-g 是全局安装，–save是将包的版本信息存储到package.json中，前端的项目都会有一个package.json的文件，进行包管理，所谓的包管理就是前端的这个项目需要依赖哪些包进行运行的。

yarn

yarn 介绍

yarn是为了取代npm ，有脸书开发的包安装器，他的优势在于它会生成一个lock文件，yarn 引入了 yarn.lock 文件，确保依赖项的版本和顺序在所有环境中都一致。这有助于避免版本冲突和不一致的问题。他也支持同时安装多个依赖包，效率得到提升

yarn 安装

npm install yarn -g

pnpm

pnpm介绍

pnpm 是为了取代yarn和npm，pnpm使用了全局储存区，同一个依赖不会再次进行安装，大大提高了后面迭代的效率，相同的版本也只会安装一次，大大节省了磁盘的空间，他和yarn一样有确定的依赖树关系，这个很重要，不同的包之间的依赖关系出问题的话，也是无法正常运行的，pnpm clean 可以一键清理用不到的包，便于管理

npnpm 安装

npm install pnpm -g

nrm

nrm介绍

nrm 是包安装源管理工具，下载这些包需要的地址有很多，比如国外的一些地址，国内的也有一些地址，当然我们用的时候一般是默认的是国外的，这个时候我们想要用国内的怎么做呢？nrm就是做这个事情的，切换源地址，就是工具代码的下载地址

nrm安装

npm install nrm -g

nrm 验证

切换下载源

nrm use huawei

添加下载源

nrm add <name> <https://name.com/package>

删除下载源

nrm del <name>

测试下载源的响应速度

nrm test <name>

简化开发配置

codePath配置

codePath是说当你的项目在终端找到之后可以通过code . 的命令将其打开，这个需要我们提前配置vscode。打开vscode，键入command + shift + p 然后键入shell 选择安装code命令即可

vscode常用插件安装

• chinese
• formate css
• Git history
• Github copilot
• GitLens
• Image preview
• Live server
• TODO Highlight
• Turbo Console
• TONGYI LingMa
• Vue- Official

写到最后

上面的环境配置结束之后，开发常规的前端项目是没有问题了，如果你开发的有微信小程序的，那么还需要安装微信开发者工具下载地址和Hbuilder下载地址的编辑器，这两个下载安装即可，不需要特殊注意什么