当前位置: 首页 > news >正文

前端入职配置新电脑!!!

        前端岗位入职第一天到底应该做些什么呢?又该怎样高效的认识、融入团队?并快速进入工作状态呢?这篇文章就来分享一下,希望对即将走向或初入前端职场的你,能够有所帮助。内含大量链接,欢迎点赞收藏!

办理入职

        入职当天,HR小姐姐会带领你签署入职合同、办理员工档案(企业如有经营管理系统,会告知你账号密码)、录入门禁等。而大公司大概率会在你入职的当月前后,组织近期刚入职的员工,进行新员工培训,帮助你理解包括但不限于企业文化/愿景/价值观、公司的组织架构、行政制度、财务制度等。

认识团队

        签署完劳动合同后,一般HR小姐姐会带你熟悉公司及周边环境,并介绍你认识团队成员,把你交付给直属领导(一般是面试你的)。

        认识新同事后,要主动与团队成员沟通交流,可简单了解团队的协作方式(代码管理工具、开发工具、编码规范等),而选择中午与团队成员一起吃午饭,是快速融入团队的最好时机。

        除了从与成员交流中来认识团队,还可以从代码仓库中了解团队背后的故事,开发者的细节都埋藏在 commit 记录中。这种事情当你做过后,你会发现自己对团队又有了新的认识。

        当办理完入职手续,领取完电脑(大概率是没得),下面要做的就是搭建环境、安装工具(本文 Windows 64位系统为例),毕竟子曰:工欲善其事,必先利其器。

搭建环境

Node.js(极为建议使用nvm和nrm 
nrm和nvm是极为出色的node包管理工具和镜像管理工具链接如下:

使用nvm安装管理nodejs(node.js version management)_node.js version management安装教程-CSDN博客

nvm 和 nrm安装使用-CSDN博客

前端项目基本都依赖 Node.js 环境,一般推荐下载稳定版本 LTS(稳定版),按照提示下一步安装即可。

官网下载

  • Node.js

安装成功后,就有 npm 了。终端输入和 npm -v 命令可查看 Node.js 和 Npm 版本号。

如图:

图片

还可以把 npm 的下载源换成公司的。

  • 查看下载源 npm config get registry

  • 切换下载源 npm config set registry ​http://registry.npmmirror.com​

nvm

一般公司项目对 Node.js 的版本要求不同,所以我们需要一个工具来为不同的项目配置不同的版本,这里推荐 nvm,全名 node.js version management。

下载地址

  • Releases · coreybutler/nvm-windows · GitHub

图片

如果先安装了 Node.js ,要在 nvm 安装过程中正确配置 Node.js 的路径。

图片

常用命令

  • 查看安装版本 nvm -v

  • 查看已安装的版本 nvm list

  • 安装最新版本 nvm install latest

  • 安装指定版本 nvm install 20.11.1

  • 卸载指定版本 nvm uninstall 20.11.1

  • 切换指定版本 nvm use 20.11.1

  • 显示Node是运行在32位还是64位 nvm arch

nrm

上面我们提到了切换 npm 下载源,而 nrm 就可以帮助我们管理和切换 npm 下载源。

  • 安装命令 npm install -g nrm

图片

常用命令

  • 可用下载源列表 nrm ls

  • 切换下载源 nrm use taobao

  • 测试速度 nrm test

  • 添加自定义下载源 nrm add test1 http://test1.com/

  • 删除源 nrm del test1

高效工具

Visual Studio Code,强烈推荐!开源、免费且跨平台的代码编辑器。

官方下载

  • Visual Studio Code - Code Editing. Redefined

图片

更多用法及插件,可以查看这篇文章:

  • 入坑 VSCode,看这一篇就够了 - 掘金

版本控制工具 Git

Git 是一个免费的开源分布式版本控制系统,旨在快速高效地处理从小型到超大型项目的所有内容。

官网下载

  • Git - Downloading Package

图片

下载后安装默认选项安装即可,桌面右键,存在Git Bash选项代表安装成功。

图片

Git 对于前端新手来说,命令之多,很难记住。TortoiseGit 是一款开源的Git的版本控制系统,也叫海龟GitTortoiseGit 提供了人性化的图形化界面,用起来更加简便,更加容易上手。

官网下载

  • Download – TortoiseGit – Windows Shell Interface to Git

图片

按照默认选项,安装成功后,如图:

图片

不想用英文的,还可以继续安装语言包

图片

汉化后:

图片

更多Git操作教程

  • 我在工作中是如何使用 git 的 - 掘金

浏览器

前端使用最多的当属谷歌浏览器 Chrome,后期可以通过账号登录,同步浏览器插件和书签。

官网下载

  • Google Chrome - 快速安全的网络浏览器,专为您而打造

图片

Chrome 浏览器插件推荐:

  • 强推 20 款实用的 Chrome 浏览器插件 - 掘金

在线图片压缩

为网站开发者和设计师量身定制的解决方案,确保每个网站的最佳访问性能。使用我们的图像优化工具发现更快加载时间的优势。

官网

  • TinyPNG – Compress WebP, PNG and JPEG images intelligently

图片

相关文章:

前端入职配置新电脑!!!

前端岗位入职第一天到底应该做些什么呢?又该怎样高效的认识、融入团队?并快速进入工作状态呢?这篇文章就来分享一下,希望对即将走向或初入前端职场的你,能够有所帮助。内含大量链接,欢迎点赞收藏&#xff0…...

Java面试题总结15之简述你对RPC,RMI的理解

RPC:在本地调用远程的函数,远程过程调用,可以跨语言实现,httpClient RMI:远程方法调用,Java中用于实现RPC的一种机制,RPC的Java版本是J2EE的网络调用机制,跨JVM调用对象的方法&…...

内网穿透利器 n2n 搭建指南

1. n2n 简介 上文实验分析了 FRP 和 Zerotier 的利弊,本文再介绍另一种内网穿透方案,n2n。 n2n 是 C/S 架构的内网穿透服务,不同于 FRP 的 反向代理,它的原理是类似 Zerotier 的先打孔,打孔失败再尝试转发。关于打孔本…...

phpcms头像上传漏洞引发的故事

目录 关键代码 第一次防御 第一次绕过 第二次防御 第二次绕过 第三次防御 第三次绕过 如何构造一个出错的压缩包 第四次防御 第四次绕过 本篇文章是参考某位大佬与开发人员对于文件包含漏洞的较量记录下的故事,因为要学习文件包含漏洞,就将大佬…...

二叉树|二叉树理论基础、二叉树的递归遍历

代码随想录 (programmercarl.com) 树和二叉树 1.树的基本概念 1.1树的定义 1.2树的逻辑表示方法 1.3树的基本术语 1.4树的性质 1.5树的基本运算 1.6树的存储结构 2.二叉树的概念和性质 2.1二叉树的定义 2.2二叉树的性质 2.3二叉树与树、森林之间的转换 3.二叉树的…...

JavaScript 语法-对象

对象 JavaScript 中的对象是一组键值对的集合,其中每个键都是字符串,每个值可以是任意类型。 对象是由一些属性和方法组成的集合,属性可以用来存储数据,方法可以用来操作数据。 属性和方法使用“.”来访问 // 创建一个对象 let …...

代码随想录阅读笔记-哈希表【四数之和】

题目 给定一个包含 n 个整数的数组 nums 和一个目标值 target,判断 nums 中是否存在四个元素 a,b,c 和 d ,使得 a b c d 的值与 target 相等?找出所有满足条件且不重复的四元组。 注意:答案中不可以包…...

JVM学习——双亲委派机制

简而言之就是为了防止与Java固有全类名重复,而导致系统崩坏所设立的机制。 当类加载器接收到加载类的任务时,首先会向上请求,一直请求到引导类加载器,如果引导类加载器无法加载,就会逐层返回让类加载器自己执行&#…...

【Paper Reading】6.RLHF-V 提出用RLHF的1.4k的数据微调显著降低MLLM的虚幻问题

分类 内容 论文题目 RLHF-V: Towards Trustworthy MLLMs via Behavior Alignment from Fine-grained Correctional Human Feedback 作者 作者团队:由来自清华大学和新加坡国立大学的研究者组成,包括Tianyu Yu, Yuan Yao, Haoye Zhang, Taiwen He, Y…...

Aloudata 倾力打造,《Data Fabric 白皮书 2.0》正式发布

数字经济时代,越来越多企业开始寻求全新的数据管理范式,以更有效地管理、利用不断增长的数据资产。在此背景下,Data Fabric 的概念应运而生,被视为面向未来的数据管理解决方案。 距离第一版白皮书问世已经过去一年多时间&#xff…...

docker内部无法使用ping等网络工具解决方案

通常docker内部没有网络,所以我们先离线安装需要的依赖包,然后再使用sh脚本容器内部访问宿主机同网络端其他服务器ip,实现监测远程ip telnet包依赖于netbase包,但是netbase包没有安装。你需要先安装netbase包,然后再尝试安装teln…...

后端工程师快速使用vue和Element

文章目录 Vue1 Vue概述2 快速入门3 Vue指令3.1 v-bind和v-model3.2 v-on3.3 v-if和v-show3.4 v-for3.5 案例 4 生命周期 Element快速使用1 Element介绍2 快速入门3 当前页面中嵌套另一个页面案例代码案例截图 Vue 1 Vue概述 通过我们学习的htmlcssjs已经能够开发美观的页面了…...

自学rabbitmq入门到精通

交换机的fault (发布与订阅模式) 因为消息是由生产者发送给excahnge,exchange发送给队列, 然后由队列发送给消费者的。 展示使用图形化界面使用fanout模式。 创建交换机 然后创建三个队列,绑定对应的交换机&#xff…...

由浅到深认识C语言(13):共用体

该文章Github地址:https://github.com/AntonyCheng/c-notes 在此介绍一下作者开源的SpringBoot项目初始化模板(Github仓库地址:https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址:https://blog.csdn…...

python爬虫(9)之requests模块

1、获取动态加载的数据 1、在开发者工具中查看动态数据 找到csdn的门户的开发者工具后到这一页面。 2、加载代码 import requests headers {User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36…...

phpstudy自定义安装mysql8.3并启动

phpstudy自定义安装mysql8.3并启动 先去官网:https://dev.mysql.com/downloads/下载压缩包文件 然后按下面的图片一步一步操作 选择版本,选择第一个压缩包文件,下载 下载完成后,解压到phpstudy环境目录下,如下图 然后进入mysq…...

Netty 学习资料

Netty 学习资料 搜集了一下Java网络库Netty的学习资料,整理如下,有空花时间研究一下。 1、Netty学习手册 《尚硅谷 Netty 核心技术及源码剖析》课程学习手册 本课程不适合零基础的学员,需要掌握常用的设计模式和数据结构 掌握 Java 的面向对…...

【概率论中的两种重要公式:全概率和贝叶斯】

贝叶斯公式(Bayes’ Theorem)是概率论中的一条重要定理,用于计算条件概率。它描述了在已知某一事件发生的条件下,另一事件发生的概率。贝叶斯公式如下所示: P ( A ∣ B ) P ( B ∣ A ) ⋅ P ( A ) P ( B ) P(A|B) \…...

python中的闭包

一、闭包 1、作用域 在Python代码中,作用域分为两种情况:全局作用域 与 局部作用域 2、变量的作用域 在全局定义的变量 > 全局变量 在局部定义的变量 > 局部变量 3、全局变量与局部变量的访问范围 ① 在全局作用域中可以访问全局变量&#…...

成功解决RuntimeError: OpenSSL 3.0‘s legacy provider failed to load

报错 RuntimeError: OpenSSL 3.0s legacy provider failed to load. This is a fatal error by default, but cryptography supports running without legacy algorithms by setting the environment variable CRYPTOGRAPHY_OPENSSL_NO_LEGACY. If you did not expect this er…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

云计算——弹性云计算器(ECS)

弹性云服务器:ECS 概述 云计算重构了ICT系统,云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台,包含如下主要概念。 ECS(Elastic Cloud Server):即弹性云服务器,是云计算…...

基于服务器使用 apt 安装、配置 Nginx

🧾 一、查看可安装的 Nginx 版本 首先,你可以运行以下命令查看可用版本: apt-cache madison nginx-core输出示例: nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下,知识图谱凭借其高效的信息组织能力,正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合,探讨知识图谱开发的实现细节,帮助读者掌握该技术栈在实际项目中的落地方法。 …...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

C#学习第29天:表达式树(Expression Trees)

目录 什么是表达式树? 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持: 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

DAY 26 函数专题1

函数定义与参数知识点回顾&#xff1a;1. 函数的定义2. 变量作用域&#xff1a;局部变量和全局变量3. 函数的参数类型&#xff1a;位置参数、默认参数、不定参数4. 传递参数的手段&#xff1a;关键词参数5 题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一…...

【字节拥抱开源】字节团队开源视频模型 ContentV: 有限算力下的视频生成模型高效训练

本项目提出了ContentV框架&#xff0c;通过三项关键创新高效加速基于DiT的视频生成模型训练&#xff1a; 极简架构设计&#xff0c;最大化复用预训练图像生成模型进行视频合成系统化的多阶段训练策略&#xff0c;利用流匹配技术提升效率经济高效的人类反馈强化学习框架&#x…...

Vue3学习(接口,泛型,自定义类型,v-for,props)

一&#xff0c;前言 继续学习 二&#xff0c;TS接口泛型自定义类型 1.接口 TypeScript 接口&#xff08;Interface&#xff09;是一种定义对象形状的强大工具&#xff0c;它可以描述对象必须包含的属性、方法和它们的类型。接口不会被编译成 JavaScript 代码&#xff0c;仅…...