前端实习日记——前端开发环境配置清单

103 阅读3分钟

实习日记篇说明:

作为初入职场实习的前端小菜鸟,我希望将所感所获简单总结,分享给同样处于新手期的小伙伴们,和大家共同成长~


实习第一步:配环境!

实习第一天,自然是先配置工作环境。

首先,梳理一下我们使用的技术栈所需的环境,依次安装配置。

配置完成之后,最好运行一下简单的demo,确保一切正常。

一、node.js 和 nvm

node必不可少,考虑到公司有些旧项目的版本比较低,需要用到nvm这个工具来管理多个node版本(按需切换)

node.js:官网下载node安装包并安装

nvm:官网下载nvm安装包并安装


Tips:如果后面有多版本node的需求,建议先安装nvm,再通过nvm安装node,避免路径不一致出现bug(乱码等)


安装完后检查是否安装成功:

// 检查当前node版本
node -v 
​
// nvm基本命令
//查看nvm版本
nvm --version
//查看管理的所有node版本
nvm list
// 安装某版本的node
nvm install xxxxx(版本号)
// 切换至某版本的node
nvm use xxxxx(版本号)

二、VScode 及常用插件

VScode:官网下载并安装

使用VScode的一些插件可以帮助我们提高开发效率,常见的插件有:中文包、样式高亮、代码块生成等。

插件推荐可以参考这篇文章:最新最全 VSCODE 插件推荐(2023版)

截图附上笔者安装的插件库

QQ图片20230404093217.png

QQ图片20230404093223.png

QQ图片20230404093227.png

QQ图片20230404093232.png

QQ图片20230404093237.png


三、Git

git:官网下载并安装

可能会遇到下载很慢的问题,此时可以通过镜像下载

registry.npmmirror.com/binary.html…


同样安装完成后,可以顺便新建仓库练习一下常用命令

下面列出git常用命令

初始化一个仓库:git init

查看分支:git branch

将已修改或未跟踪的文件添加到暂存区:git add [file]git add .

提交至本地仓库:git commit -m "提及记录 xxxx"

查看当前工作目录和暂存区的状态: git status

查看提交的日志记录:git log

合并某分支(xxx)到当前分支:git merge xxx

切换到分支 xxx:git checkout xxx

创建分支 xxx 并切换到该分支:git checkout -b xxx

删除分支 xxx:git branch -d xxx


从远程仓库克隆:git clone xxxxxxxxx(远程仓库ssh链接)

初次推送本地分支到远程分支:git push -u origin xxxxx(远程分支名称)

从远程分支拉取代码:git pull

本地分支推送至远程分支:git push


四、ni

ni:官网下载并安装

在学习公司项目时,很多人会卡在第一步的运行项目上。

很多时候会因为依赖包管理工具的使用不正确(不知道具体是用的npm 、yarn还是其他)

不知道该如何选取正确的包管理工具时,可以用ni这个依赖包安装神器,它会自动检测正确的包管理工具并帮助安装依赖包

// 一般安装依赖包
npm intall 
​
// ni安装
ni

五、前端框架demo试运行

常用的前端框架有react和vue,建议分别创建demo运行测试

OP23TU[4CNKER$ZW8]UTQ8K.png

22222.jpg