前端新人入职必备清单,保姆级教程!(上)

简介: 前端新人入职必备清单,保姆级教程!

前端新人入职的第一天通常就是配置环境,熟悉项目。本文就来分享前端新人入职第一天应该如何配置环境,保姆级教程,值得收藏!

本文以 Mac 系统为例,使用 Windows 的小伙伴也可以参考!

111.webp.jpg

开发环境

Node.js

通常我们的项目都是依赖Node.js 环境的,所以第一步就来安装 Node.js。

打开 Node.js 官网(**nodejs.org/en**),其会自动识… Node.js:LTS(稳定版)Current(最新版),这里建议下载稳定版,新版可能存在一些Bug。2.webp (1).jpg


下载完成后之后,按照提示一步步安装即可:

6.webp (1).jpg

这个安装包含 Node.js 和 Npm。我这里安装的是 Node.js v18.16.1 和 Npm v9.5.1。可以在终端中通过 node -vnpm -v命令来分别查看 Node.js 和 Npm 版本:

5.webp (1).jpg

nvm

不同的项目可能对 Node.js 的版本要求不同,这时我门就需要切换不同版本的 Node.js。我们可以通过 Nvm 来管理Node.js 版本。

nvm(Node Version Manager)是一个用于管理 Node.js 版本的工具,它被设计成每个用户独立安装,并在每个终端会话中调用。nvm 可以在任何符合 POSIX 标准的 shell(如 sh、dash、ksh、zsh、bash)上运行,特别适用于以下平台:Unix、macOS 和 Windows 的 WSL(Windows Subsystem for Linux)。

nvm 的主要功能是允许用户轻松切换不同版本的 Node.js,并在不同的项目中使用不同的 Node.js 版本。它为每个已安装的 Node.js 版本提供隔离的运行环境,使得用户可以在同一系统上同时使用多个 Node.js 版本而不会相互干扰。

首先在终端中通过以下命令来安装 nvm:

javascript

复制代码

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

当我输入该命令后,终端就报错了,报错信息:curl: (7) Failed to connect to raw.githubusercontent.com port 443 after 5 ms: Couldn't connect to server,这个报错是因为github 有些域名访问不到,可以通过配置hosts里面的ip域名对应关系解决。

  1. 在终端中输入以下命令来打开hosts文件以进行编辑:

javascript

复制代码

sudo vim /etc/hosts
  1. 在文件中追加以下对应关系:
199.232.68.133 raw.githubusercontent.com
199.232.68.133 user-images.githubusercontent.com
199.232.68.133 avatars2.githubusercontent.com
199.232.68.133 avatars1.githubusercontent.com

11.webp.jpg

然后按下ESC键,输入:w来保存即可。这个配置不仅可以解决 nvm 的安装问题,还能使加载不了图片的 GitHub页面恢复正常,homebrew 也能装了。然后再输入上面的命令就可以安装nvm了。

安装完成之后,重新打开终端,输入 nvm,如果出现以下内容就是安装成功了:

12.webp.jpg

如果报错:zsh: command not found: nvm,那就是安装失败了。原因就是电脑缺少 bash_profile 文件。该文件位于/Users/MacUserName/.bash_profile路径,如果没有就创建一个,通过以下命令来创建:

touch .bash_profile

然后通过以下命令来打开该文件:

open .bash_profile

在文件中添加以下内容:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" 

保存之后,在终端中输入以下命令来刷新配置:

source ~/.bash_profile

重新打开终端,输入nvm 来查看:

13.webp.jpg

安装成功就可以愉快的玩耍啦,nvm 提供了很多命令管理 Node.js 版本。当输入 nvm 时,也会列出来所有可用的命令,下面来看看常用的 nvm 命令。

  1. 安装 Node.js 版本:
  • 安装最新稳定版的 Node.js:nvm install stable
  • 安装指定版本的 Node.js:nvm install (例如:nvm install 14.17.0
  1. 切换 Node.js 版本:
  • 切换到已安装的其中一个版本:nvm use (例如:nvm use 14.17.0
  • 可以通过简写版本号进行切换(例如 nvm use 14),nvm 将自动选择符合的已安装版本。
  • 如果在项目目录中创建了 .nvmrc 文件,nvm 在进入该目录时会自动切换到文件中指定的 Node.js 版本。
  1. 查看已安装的 Node.js 版本:
  • 列出已安装的所有版本:nvm ls
  • 列出远程可用的所有版本:nvm ls-remote
  1. 卸载 Node.js 版本:
  • 卸载指定的 Node.js 版本:nvm uninstall (例如:nvm uninstall 14.17.0
  1. 设置默认的 Node.js 版本:
  • 设置默认版本:nvm alias default (例如:nvm alias default 14.17.0
  • 这样,在新打开的终端中将自动使用默认版本。
  1. 运行 Node.js 命令和 npm:
  • 在已安装的 Node.js 版本下运行命令:nvm exec   (例如:nvm exec 14.17.0 node -v
  • 在当前使用的 Node.js 版本下运行命令:nvm run (例如:nvm run node -v

nrm

在开发中,我们通常需要安装很多 npm 包,而默认的 npm 源有时候就可能下载很慢,所以就需要切换 npm 源,nrm 就可以帮助我们管理和切换 nrm 源。其特点如下:

  • 管理多个源:nrm 允许管理多个 npm 源,例如官方源、淘宝源、cnpm 源等。你可以根据需要快速切换不同的源。
  • 快速切换:nrm 提供了快捷的命令来切换 npm 源,无需手动修改配置文件。你可以通过简单的命令在不同的源之间进行切换。
  • 测试速度:nrm 可以测试各个源的响应速度,并给出评分,帮助你选择最快的源来加快依赖包的下载速度。

使用方法:

  1. 安装:首先,需要在全局安装 nrm。在命令行中执行以下命令即可:

javascript

复制代码

npm install -g nrm
  1. 查看可用源:你可以使用以下命令查看当前可用的源列表:

javascript

复制代码

nrm ls
  1. 切换源:要切换到某个源,可以使用以下命令:

javascript

复制代码

nrm use <源名称>

例如,要切换到 taobao 源,可以执行:

javascript

复制代码

nrm use taobao
  1. 测试源的速度:你可以通过以下命令测试各个源的响应速度:

javascript

复制代码

nrm test
  1. 添加自定义源:如果你有自定义的源,可以通过以下命令添加:

javascript

复制代码

nrm add <源名称> <源地址>

例如,添加一个名为 myregistry 的自定义源:

javascript

复制代码

nrm add myregistry http://myregistry.com/
  1. 删除源:如果要删除已添加的源,可以使用以下命令:

javascript

复制代码

nrm del <源名称>

在安装 nrm 时,我遇到以下报错,这就是说没有安装权限:

可以使用管理员权限进行安装,只需要在命令前面增加以一个 sudo,执行 后输入电脑的密码即可。


Homebrew


Homebrew 是 macOS 上一款常用的包管理工具,用于安装、升级和管理软件包,可以通过它来安装 Git 等。

使用方法如下:

  1. 安装:在终端中执行以下命令来安装 Homebrew:
    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  1. 安装软件包:要安装一个软件包,只需在终端中执行以下命令:
    brew install <软件包名称>

例如,要安装 wget 软件包,可以执行:


brew install wget
  1. 升级软件包:可以使用以下命令来升级已安装的软件包:


    brew upgrade <软件包名称>

例如,要升级所有已安装的软件包,可以执行:


    brew upgrade
  1. 查找软件包:如果不确定某个软件包的名称,可以使用以下命令进行模糊搜索:


    brew search <关键词>
  1. 列出已安装的软件包:可以使用以下命令列出已经安装的软件包:


    brew list
  1. 删除软件包:要删除已安装的软件包,可以执行以下命令:


    CopyCodebrew uninstall <软件包名称>
  1. 更新 Homebrew:可以使用以下命令来更新 Homebrew 自身:


    brew update

开发工具

IDE

前端开发用的最多的 IDE 就是 Visual Studio Code 和 Webstorm。其中 VS Code 是开源的,完全免费,而Webstorm 是需要付费订阅的。笔者一直在用 VS Code,这里以 VS Code 为例,看看如何安装它。

Visual Studio Code(简称为 VS Code)是由微软开发的免费、开源且跨平台的代码编辑器,其特点如下:

  • 高度可定制:VS Code 允许用户通过安装插件和主题来自定义编辑器的外观和功能,满足不同用户的需求。
  • 丰富的扩展生态系统:VS Code 拥有一个庞大的扩展市场,用户可以选择从数千个插件中找到适合自己的工具和功能,例如代码片段、调试器、语法高亮等。
  • 强大的编辑功能:VS Code 提供了智能代码补全、语法检查、代码导航、重构等强大的编辑功能,提高了开发效率。
  • 内置终端:VS Code 内置了终端窗口,可以直接在编辑器中执行命令行操作,无需切换到外部终端。
  • 调试支持:VS Code 内置了调试器,可以方便地进行代码调试和错误排查,支持多种编程语言和调试器插件。
  • 版本控制集成:VS Code 与 Git 和其他版本控制系统集成紧密,提供了版本控制工具和界面,方便代码管理和协作开发。
  • 可视化编辑:VS Code 支持以分割视图和并排编辑的方式工作,使得同时编辑多个文件变得更加容易。
  • 跨平台:VS Code 可以在 Windows、macOS 和 Linux 系统上运行,用户可以在不同的操作系统中享受一致的开发体验。
  • 快速启动和轻量级:VS Code 启动迅速,占用系统资源相对较少,适合在任何配置的计算机上进行开发。

首先,在 VS Code 官网(**code.visualstudio.com/**)下载最新的稳定版…

3.webp.jpg

官网会识别我们当前是什么系统,自动选择适合该系统的版本,点击下载即可。当然也可以点击下拉箭头选择需要的版本。

下载的文件,直接解压就可以用了,长这样:

2.webp.jpg

默认是英文版,如果需要中文版,可以在插件市场中下载官方提供的简体中文插件:

1.webp.jpg

这样,VS Code 就安装完成啦,接下来就可以愉快的 Codeing 啦!


前端新人入职必备清单,保姆级教程!(下)https://developer.aliyun.com/article/1411616

相关文章
|
4月前
|
前端开发 JavaScript
轻松上手:基于single-spa构建qiankun微前端项目完整教程
轻松上手:基于single-spa构建qiankun微前端项目完整教程
115 0
|
6月前
|
iOS开发 Android开发 MacOS
从零到全能开发者:解锁Uno Platform,一键跨越多平台应用开发的神奇之旅,让你的代码飞遍Windows、iOS、Android、macOS及Web,技术小白也能秒变跨平台大神!
【8月更文挑战第31天】从零开始,踏上使用Uno Platform开发跨平台应用的旅程。只需编写一次代码,即可轻松部署到Windows、iOS、macOS、Android及Web(通过WASM)等多个平台。Uno Platform为.NET生态带来前所未有的灵活性和效率,简化跨平台开发。首先确保安装了Visual Studio或VS Code及.NET SDK,然后选择合适的项目模板创建新项目。项目结构类似传统.NET MAUI或WPF项目,包含核心NuGet包。通过简单的按钮示例,你可以快速上手并构建应用。Uno Platform让你的技术探索之旅充满无限可能。
165 0
|
6月前
|
前端开发 Java Maven
【前端学java】全网最详细的maven安装与IDEA集成教程!
【8月更文挑战第12天】全网最详细的maven安装与IDEA集成教程!
140 2
【前端学java】全网最详细的maven安装与IDEA集成教程!
|
7月前
|
前端开发 JavaScript
webpack 和 babel 实用教程【前端必备】
webpack 和 babel 实用教程【前端必备】
73 0
|
7月前
|
存储 前端开发 JavaScript
零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好
零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好
34 0
|
7月前
|
移动开发 前端开发 HTML5
零基础学前端系列教程 | 和前端谈恋爱的第005天——约会账单
零基础学前端系列教程 | 和前端谈恋爱的第005天——约会账单
37 1
|
7月前
|
存储 前端开发 C++
零基础学前端系列教程 | 和前端谈恋爱的第004天——打扮漂亮
零基础学前端系列教程 | 和前端谈恋爱的第004天——打扮漂亮
43 0
|
4月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
84 0
|
4月前
|
前端开发 算法 测试技术
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
本文对比测试了通义千文、文心一言、智谱和讯飞等多个国产大模型在处理基础计数问题上的表现,特别是通过链式推理(COT)提示的效果。结果显示,GPTo1-mini、文心一言3.5和讯飞4.0Ultra在首轮测试中表现优秀,而其他模型在COT提示后也能显著提升正确率,唯有讯飞4.0-Lite表现不佳。测试强调了COT在提升模型逻辑推理能力中的重要性,并指出免费版本中智谱GLM较为可靠。
125 0
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
|
4月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
102 1

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 10
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    51
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    141
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75