前端新人入职必备清单，保姆级教程！

,,通常我们的项目都是依赖Node.js 环境的，所以第一步就来安装 Node.js。,打开 Node.js 官网（https://nodejs.org/en），其会自动识别当前的操作系统l类型，直接下载即可。官网提供了两个版本的 Node.js：LTS（稳定版） 和 Current（最新版），这里建议下载稳定版，新版可能存在一些Bug。,,下载完成后之后，按照提示一步步安装即可：,,这个安装包含 Node.js 和 Npm。我这里安装的是 Node.js v18.16.1 和 Npm v9.5.1。可以在终端中通过 node -v 和 npm -v命令来分别查看 Node.js 和 Npm 版本：,,不同的项目可能对 Node.js 的版本要求不同，这时我门就需要切换不同版本的 Node.js。我们可以通过 Nvm 来管理Node.js 版本。,首先在终端中通过以下命令来安装 nvm：,当我输入该命令后，终端就报错了，报错信息：curl: (7) Failed to connect to raw.githubusercontent.com port 443 after 5 ms: Couldn’t connect to server，这个报错是因为github 有些域名访问不到，可以通过配置hosts里面的ip域名对应关系解决。,在终端中输入以下命令来打开hosts文件以进行编辑：,在文件中追加以下对应关系：,如下：,然后按下ESC键，输入:w来保存即可。这个配置不仅可以解决 nvm 的安装问题，还能使加载不了图片的 GitHub页面恢复正常，homebrew 也能装了。然后再输入上面的命令就可以安装nvm了。,安装完成之后，重新打开终端，输入 nvm，如果出现以下内容就是安装成功了：,,如果报错：zsh: command not found: nvm，那就是安装失败了。原因就是电脑缺少 bash_profile 文件。该文件位于/Users/MacUserName/.bash_profile路径，如果没有就创建一个，通过以下命令来创建：,然后通过以下命令来打开该文件：,在文件中添加以下内容：,保存之后，在终端中输入以下命令来刷新配置：,重新打开终端，输入nvm 来查看：,安装成功就可以愉快的玩耍啦，nvm 提供了很多命令管理 Node.js 版本。当输入 nvm 时，也会列出来所有可用的命令，下面来看看常用的 nvm 命令。,安装 Node.js 版本：,切换 Node.js 版本：,查看已安装的 Node.js 版本：,卸载 Node.js 版本：,设置默认的 Node.js 版本：,运行 Node.js 命令和 npm：,在开发中，我们通常需要安装很多 npm 包，而默认的 npm 源有时候就可能下载很慢，所以就需要切换 npm 源，nrm 就可以帮助我们管理和切换 nrm 源。其特点如下：,使用方法：,安装：首先，需要在全局安装 nrm。在命令行中执行以下命令即可：,查看可用源：你可以使用以下命令查看当前可用的源列表：,切换源：要切换到某个源，可以使用以下命令：,例如，要切换到 taobao 源，可以执行：,测试源的速度：你可以通过以下命令测试各个源的响应速度：,添加自定义源：如果你有自定义的源，可以通过以下命令添加：,例如，添加一个名为 myregistry 的自定义源：,删除源：如果要删除已添加的源，可以使用以下命令：,,Homebrew 是 macOS 上一款常用的包管理工具，用于安装、升级和管理软件包，可以通过它来安装 Git 等。,使用方法如下：,安装：在终端中执行以下命令来安装 Homebrew：,安装软件包：要安装一个软件包，只需在终端中执行以下命令：,例如，要安装 wget 软件包，可以执行：,升级软件包：可以使用以下命令来升级已安装的软件包：,例如，要升级所有已安装的软件包，可以执行：,查找软件包：如果不确定某个软件包的名称，可以使用以下命令进行模糊搜索：,列出已安装的软件包：可以使用以下命令列出已经安装的软件包：,删除软件包：要删除已安装的软件包，可以执行以下命令：,更新 Homebrew：可以使用以下命令来更新 Homebrew 自身：,前端开发用的最多的 IDE 就是 Visual Studio Code 和 Webstorm。其中 VS Code 是开源的，完全免费，而Webstorm 是需要付费订阅的。笔者一直在用 VS Code，这里以 VS Code 为例，看看如何安装它。,首先，在 VS Code 官网（https://code.visualstudio.com/）下载最新的稳定版：,,官网会识别我们当前是什么系统，自动选择适合该系统的版本，点击下载即可。当然也可以点击下拉箭头选择需要的版本。,下载的文件，直接解压就可以用了，长这样：,默认是英文版，如果需要中文版，可以在插件市场中下载官方提供的简体中文插件：,这样，VS Code 就安装完成啦，接下来就可以愉快的 Codeing 啦！,VS Code 的插件市场有很多用于日常开发的高效插件，这里附上之前分享的插件总结，可以按需安装：2023年最新最全 VSCode 插件推荐！,前端开发，浏览器当然必不可少啦，笔者最常用的浏览器就是 Chrome，如果需要兼容各个浏览器，可以下载多个。,Chrome 可以在其官网（https://www.google.cn/chrome/index.html）下载：,,下载完成后，按照提示安装即可。安装完成之后，浏览器的默认搜索引擎是谷歌，如果需要更改，可以在设置中进行配置：,,Chrome 也有一个很丰富的插件市场，这里附上之前分享的用于前端开发的高效 Chrome 插件总结：《推荐50个超实用的 Chrome 扩展，建议收藏！》,终端是前端开发中必不可少的工具，个人觉得 iTerm2 是比 Mac 默认终端好用很多的，可定制程度很高。iTerm2 是一款功能强大的终端模拟器，其有如下特点：,iTerm2 的安装也很简单，只需要在官网（https://iterm2.com/downloads.html）下载安装包，并按照步骤安装即可：,官网提供了两个版本，类似于 Node.js，一个是稳定版，一个是最新的测试版，这里建议下载稳定版（Stable Release），避免使用过程中出现一些不可预测的问题。,这里分享一篇 iTerm2 的保姆级配置教程，可以参考这篇教程并根据自己的需求进行配置：https://zhuanlan.zhihu.com/p/550022490,目前最常用的代码版本控制工具就是 Git 了。下面就来通过 Homebrew 安装 Git，在终端中输入以下命令即可：,安装完成之后，需要设置邮箱和用户：,除了上述下载 Git 的方法，Git 官网（https://git-scm.com/download/mac）还提供了多种安装  Git 的方法：,,有了 Git 就可以通过 Git 内置的命令来进行代码操作了，除此之外，我们还可以通过 VS Code 和 SoucreTree 进行可视化 Git 操作。下面就来看看 SoucreTree 是如何安装使用的。,,使用方法如下：,Charles 也是笔者日常使用比较多的一个软件，用于代码调试。笔者最常用的就是拿到线上数据，在本地开发环境进行代理调试。,首先在官网（https://www.charlesproxy.com/latest-release/download.do）下载最新版 Charles，这里根据自己当前的操作系统选择就好了：,,下载完成之后，按照提示一步步安装即可。需要注意的是，这个软件并不是完全免费的，如果未订阅，那每次只能使用 30 分钟就会自动重启。,,可以参考这两个使用教程：,最后再来分享几个笔者日常使用比较多的软件。,draw.io 是一款免费的在线图表编辑工具，可以绘制流程图、UML、类图、组织结构图、泳道图、E-R图、思维导图等，堪称画图神器！,draw.io 提供了丰富的模版，支持商务、图表、cloud、工程、流程图、布局、地图、网络、软件、表格、UML、Venn等。还可以自定义模板。,,除此之外，draw.io 还有很多特点：,draw.io 使用和下载：,XMind 是一个跨平台的思维导图软件，具有多种结构样式，除了普通的思维导图，还包括树形图、逻辑图、鱼骨图、时间轴、树状表格等等，不同的结构样式可以自由组合混用，同时支持一键更换结构样式。其提供了很多类型的思维导图，并支持设置多种主题风格：,,除此之外，Xmind 还有很多特点：,下载地址：https://xmind.app/download/,超级右键是一个用于 Mac 的右键增强工具，Mac 不像 Windows 那样可以右键直接创建文件之类的，这个软件就可以帮助我们在某些场景下提高工作效率。在 Appstore 中搜索超级右键，下载即可（专业版是收费的，其他是免费的，可以根据需要选择）：,,可以在偏好设置中来根据需要进行设置：,,这里我进行了简单的设置，就可以直接右键新建文件了，并且可以直接右键点击一个文件，使用 VS Code 打开，或者在某个目录中直接打开终端等：,