前端开发必配置的环境及工具,前端第一天需要装的环境,前端入职 —— 安装开发环境。如何快速看懂一个正在开发的前端项目、老项目

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

  1. 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.看一些公共的方法

猜你喜欢

转载自blog.csdn.net/weixin_43239880/article/details/130313130