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

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

办理入职

        入职当天,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

图片

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/752818.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jenkins使用公共库问题

Jenkins解决上编译解决引用问题 本地运行 把公共库创建链接到指定项目目录下即可 mklink /d /j D:\codepath\xxxx\yyyyy\tool_base D:\codepath\tool_base

香港公司变更注册地址所需材料及流程全解析

香港公司变更注册地址:所需材料及流程全解析 各位老板好,我是经典世纪胡云帅,随着业务的拓展和发展,香港公司可能需要变更其注册地址。变更注册地址不仅关系到公司的日常运营,还与公司的法律地位和品牌形象息息相关。本…

cesium HeadingPitchRoll HeadingPitchRange

一、HeadingPitchRoll表示Heading、Pitch、Roll,用于orientation属性上的,比如camera的setView,flyTo var heading Cesium.Math.toRadians(0.0);var pitch Cesium.Math.toRadians(-25.0);var roll Cesium.Math.toRadians(0);viewer.camera…

餐饮店引流活动方案与最佳营销方案揭秘

想开实体店或正在创业的朋友们,大家好!我是一名资深的实体店创业者,本人经营鲜奶吧5年时间,做的是社区店,今天我将分享一些餐饮店引流活动和营销方案的干货,希望能给大家带来一些启发和帮助。 一、引流活动…

基于多尺度视网膜增强图像去雾算法(MSR,Multi-Scale Retinex),Matalb实现

博主简介: 专注、专一于Matlab图像处理学习、交流,matlab图像代码/项目合作可以联系(QQ:3249726188) 个人主页:Matlab_ImagePro-CSDN博客 原则:代码均由本人编写完成,非中介,提供有偿…

【Flink SQL】Flink SQL 基础概念(四):SQL 的时间属性

《Flink SQL 基础概念》系列,共包含以下 5 篇文章: Flink SQL 基础概念(一):SQL & Table 运行环境、基本概念及常用 APIFlink SQL 基础概念(二):数据类型Flink SQL 基础概念&am…

浅谈C++的模板—— 这一篇就够了

今天我们来谈谈C中有关于模板的知识😊😊😊,对于C模板来说,我们首先得了解以下几个术语 函数模板模板函数模板实例化模板特例化模板的实参推演模板的非类型参数非模板函数类模板模板类选择性实例化 下面,我…

在Visual Studio中调试 .NET源代码

前言 在我们日常开发过程中常常会使用到很多其他封装好的第三方类库(NuGet依赖项)或者是.NET框架中自带的库。如果可以设置断点并在NuGet依赖项或框架本身上使用调试器的所有功能,那么我们的源码调试体验和生产效率会得到大大的提升。今天我…

数据分析 | Matplotlib

Matplotlib 是 Python 中常用的 2D 绘图库,它能轻松地将数据进行可视化,作出精美的图表。 绘制折线图: import matplotlib.pyplot as plt #时间 x[周一,周二,周三,周四,周五,周六,周日] #能量值 y[61,72,66,79,80,88,85] # 用来设置字体样式…

vulnhub ---- Dr4g0n b4ll

文章目录 网段扫描隐藏目录隐写尝试通过ssh连接提权路径劫持 网段扫描 nmap -sn 命令用于执行主机存活扫描,仅检测目标网络中的活动主机,而不进行端口扫描。 ┌──(root㉿kali)-[~/Downloads] └─# nmap -sn 10.10.10.0/24 …

计算机网络——物理层(宽带接入技术)

计算机网络——物理层(宽带接入技术) 什么是宽带有线带宽接入xDSLADSL 技术ADSL 的大部分组成 光纤同轴混合网(HFC 网)机顶盒与电缆调制解调器(set-top box) FTTx 技术光配线网 ODN (Optical Distribution …

nginx 基本使用、借助 nginx 和 mkcert 实现本地 https://localhost 测试。

CSDN 如何将资源设置为免费? 安装和基本使用 进入 nginx 官网 下载 Mainline version 版本 解压到一个你喜欢的位置,比如解压到 C: 目录 不管配不配置环境变量,对 nginx 的所有操作都应该在对应文件夹中 基本命令的使用: cd …

性能测试 事务 -- HPE Virtual User Generator -Web -HTTP/HTML

软件介绍 Virtual User Generator ,记录用户流程并创建一个自动化性能测试脚本 Controller,单一控制点,轻松、有效地控制所有Vuser,执行期间监控场景性能 Analysis,生成性能测试报告,以图表形式呈现。 操…

2024图表分析网页模版大数据可视化大屏电子沙盘合集包含金融行业智慧大厅智慧交通智慧门店智慧物流智慧小区

2024图表分析网页模版大数据可视化大屏电子沙盘合集包含金融行业智慧大厅智慧交通智慧门店智慧物流智慧小区 项目介绍: 图表分析网页模版 大数据可视化大屏电子沙盘合集,项目基于html/css/js,包含行业: 智慧政务 智慧社区 金融行…

mysql 更新时,旧值与新值相同会怎么做?

文章目录 1 问题描述2 验证2.1 验证猜想12.2 验证猜想2 3 结论4 mysql 为什么这么设计呢? 1 问题描述 创建一张表t,插入一行数据 mysql> CREATE TABLE t ( id int(11) NOT NULL primary key auto_increment, a int(11) DEFAULT NULL ) ENGINEInnoDB…

第111讲:Mycat实践指南:固定Hash算法分片下的水平分表详解

文章目录 1.固定Hash算法分片的概念1.1.固定Hash算法的概念1.2.固定Hash算法是如何将数据路由到分片节点的 2.使用固定Hash算法分片对某张表进行水平拆分2.1.在所有的分片节点中创建表结构2.2.配置Mycat实现固定Hash算法分片的水平分表2.2.1.配置Schema配置文件2.2.2.配置Rule分…

unityprotobuf自动生成C#

Release Protocol Buffers v3.19.4 protocolbuffers/protobuf GitHub 导入Source code 里面的 csharp/src/Google.Protobuf 进入Unity 拷贝其他版本的 System.Runtime.CompilerServices.Unsafe进入工程 使用protoc-3.19.4-win32 里面的exe去编译proto文件为C# using Sys…

MybatisPlus-Generator自定义模版生成CRUD、DTO、VO、Convert等

个人博客:无奈何杨(wnhyang) 个人语雀:wnhyang 共享语雀:在线知识共享 Github:wnhyang - Overview 简介 如标题所言,本篇文章介绍如何使用MybatisPlus-Generator自定义模版生成CRUD、DTO、V…

Redis实战——查询缓存缓存穿透、雪崩、击穿

目录 为什么要使用缓存缓存的作用缓存的成本如何使用缓存缓存模型和思路缓存更新策略数据库和缓存不一致解决方案数据库和缓存不一致采用什么方案对比删除缓存与更新缓存如何保证缓存与数据库的操作同时成功/同时失败先操作缓存还是先操作数据库? 实现商铺缓存与数据…

Tensorflow笔记(二):激活函数、优化器等、神经网络模型实现(商品销量预测)

import tensorflow as tf import numpy as np from tqdm import tqdm# ----------------------------- tensor常用函数2 ----------------------------------- a tf.constant([1, 2, 3, 1, 2]) b tf.constant([0, 1, 3, 4, 5]) c tf.where(tf.greater(a, b), a, b) # 若a&g…