前端开发必配置的环境及工具，前端第一天需要装的环境，前端入职 —— 安装开发环境。如何快速看懂一个正在开发的前端项目、老项目
1.node环境（必备）
直接去官网下载，一路安装即可。官网地址：https://nodejs.org/en，下载安装好了，你就拥有了node环境以及包管理工具npm
2.vue脚手架环境（vue开发必备）
npm install -g vue-cli
3.编辑器：vscode及插件（必备）
vscode官网下载：https://code.visualstudio.com/，下载好了一路安装即可
必备插件：参考我的这篇博客分别去下载：https://blog.csdn.net/weixin_43239880/article/details/130289001?spm=1001.2014.3001.5502
或者将你自己常用的插件带到公司去，参考我的文章:
https://blog.csdn.net/weixin_43239880/article/details/129146513?spm=1001.2014.3001.5502
4.版本管理工具:git（必备）
git官网下载https://git-scm.com/downloads/，下载好了一路安装即可、
因为我多是使用git命令行，以及vscode自带的git管理工具，所以就没下载小乌龟等图形化git工具，这里大家随意下一个版本管理工具即可。
5.命令行窗口：powershell或者cmder（必备）
命令行窗口可以选择windows自带的powershell，那么你就不用下载了。直接右键打开即可。
如果是喜欢使用cmder的，那么就是用cmder来当做是命令行窗口也行。
cmder介绍：cmder是一个增强型命令行工具,不仅可以使用windows下的所有命令,更爽的是可以使用linux的命令,shell命令
cmder官网下载：https://cmder.app/
cmder的github地址：https://github.com/cmderdev/cmder
6.谷歌浏览器（必备）
一般不用装，公司开发电脑上都有，如果没有的话，就装一个吧。
官网下载地址：https://www.google.cn/chrome/
7.postman(还是装一下吧)
这个其实可以装，最好还是装一下。主要是用来做接口测试的，一般用于测试后台的接口是否可用。但是实际开发中前后端都很少去测（测接口的活真的又累又脏），都是调用了之后发现接口有问题会先去测一下，还有问题就抛给后台。
官网下载地址：https://www.postman.com/
8.外接屏幕(建议来一个)
不得不说，对于前端来说，有两个屏幕开发简直不要太爽。如果公司可以申请多一个显示屏，那还是多申请一个吧，不能的话，后面自己买一个也行，毕竟不是太贵。
9.nvm(可选)?
nvm介绍：node.js和npm的版本管理工具，主要是因为项目使用的node及npm版本可能不同。**所以进去第一件事，问下这个项目对node版本有没有什么要求，没有的话，就不需要使用nvm。**不问的话，你怎么改了代码的，你都不知道。
如果是需要使用nvm的，那么你就需要先卸载node。然后安装nvm的包，这里安装的教程有很多，过程就不再赘述了。关键是你都用到nvm，你也不是啥新手了。可以看看这篇来使用：https://blog.csdn.net/weixin_57844432/article/details/127788884
主要命令：
a.查看已经安装的node版本：
nvm list
b.切换node版本(如果失败那就用管理员身份打开cmd进行切换)
nvm use xxx
c.安装node版本,例如nvm install 0.12.18
nvm install 版本号
10.vue-dev-tool(可选)?
这个是vue的开发插件，主要用于观察vue组件的数据流动和vuex的数据变化的，协助你更好的找到bug。
这个是否使用纯粹看个人，可装可不装，不过你要是找不到bug的话，这个插件还是可以协助你一点的。
下载地址：官网：https://github.com/vuejs/devtools
如何下载并安装？参考博客：1. https://blog.csdn.net/weixin_43843572/article/details/124980771
- https://blog.csdn.net/ashin8032/article/details/122600345
说明：也可以直接去插件网站下载vue的开发插件然后导入到谷歌浏览器中
11.yarn(包管理工具)? 可选
如果是喜欢用yarn当做包管理工具的，可以选择安装yarn。或者因为某个github上的项目是用yarn安装的，你需要用到，那么就需要安装这个yarn。
安装命令：npm install -g yarn
安装教程很多，这里不多赘述，可以参考：https://blog.csdn.net/weixin_40808668/article/details/122606543
12.ps（可选）?
这个纯粹看个人，有些时候很简单的ps，又不好让别人帮忙的时候，只能自己上手了。
下载地址：
链接：https://pan.baidu.com/s/1Hg4gZ_l3bRclqLEK0ahkIQ
提取码：xicy
总结：
以上都是作为一个前端一些必备或者可选的开发工具和环境，把这些弄好了，你就可以开开心心的进行开发你的项目了。
补充：对于新人来说，如何快速看懂一个正在开发的项目、老项目？
1.先把项目clone下来，然后安装依赖，把项目跑起来（最重要，项目都跑不起来，其他瞎扯）
这里会有几个细节，比如你clone不下来项目，很大概率是因为你刚去公司，根本就没有克隆项目的权限，这个时候请叫你的组长把权限给你。报错英文关键词：拒绝(refuse)，权限(authority), 限制(limits)
第二个细节就是：去package.json中看启动项目的命令是啥
第三个细节就是，你很可能会安装依赖安装失败。经典安装失败。这个时候你可以问问老同事有没有node的版本要求，没有的话，你尽量用他们版本的node和npm来安装。如果还有问题的话，参考我写的这篇文章：https://blog.csdn.net/weixin_43239880/article/details/126749648?spm=1001.2014.3001.5501
2.先在跑起来的项目中了解，熟悉自己的项目是干什么的，做什么类型的。
3.看代码文件，顺序为：
a看一下总体的目录结构
b.再看路由文件，先看看页面对应了哪个路由，看下如果自己要增加路由，该怎么增加
c.看一些公共的组件有什么
d.看一些公共的方法