前端环境搭建与准备-指引

​​​​​​

​
🌟 以下内容，全部是我写在掘金上的专栏 《前端环境搭建与准备-指引》 ， 后续更新会在掘金。请前往掘金查看。注明出处后可任意转载。

​
我把环境搭建与准备工作整理成一个专栏，本文是属于专栏的指引。

正经人请点此传送门进入指引列表

适合场景与人群

🌸 前提条件

• ⭐ 电脑系统是windows10环境
• ⭐ 不管你是从业的是app开发、网页开发、小程序开发，你都必须要做的事

🌸 适合人群——卷王

• ⭐ 如果你是入职新人，公司给你一台没有配置任何前端开发的环境和编码工具，那么可以根据本文进行指引入手配置
• ⭐ 如果你是导师，你需要带领一个新人，新人一点前端前置的开发环境和都没有，那么赶紧把这篇文章分享给他
• ⭐ 如果你是前端刚入坑，你不知道从哪里开始填坑，你志向成为一名前端填坑高手，那么赶紧把专栏偷偷藏起来
• ⭐ 如果你是前端摸鱼人，想要巩固基础环境搭建与准备知识，请悄咪咪学，别告诉别人

🌸 专栏内容概述

结合我的工作经验编写了这个专栏，因为我们实际工作当中，需要经常切换nodejs适应不同的项目，所以专栏切入点将从nvm管理多版本nodejs开始，专栏主要内容为：从环境搭建到编码软件安装与配置.其中nodejs的版本管理我是使用nvm，虽然pnpm很火，且作者也针对与pnpm发布了nodejs版本管理工具pnpm env，,但是到目前技术仍然是很新的,很多以前的nodejs版本并不支持（我很多项目使用的很老的node），所以我的建议还是使用nvm作为nodejs的版本管理工具，但是后续有时间一定会更新，补上pnpm dev。

专栏内容大致如下

• 1️⃣. 基础的环境搭建配置：nodejs版本管理工具
• 2️⃣. 包管理工具:nvm,npm、yarn、pnpm
• 3️⃣. 代码git托管：git安装、代码传输方式ssh或http的相关简介、可视化GUI工具sourceTree
• 4️⃣. 编码工具：vscode软件安装与配置，vscode扩展推荐

专栏指引列表

根据以下顺序进行

一、nodejs版本管理工具

后续会更 pnpm env，但是目前还是更推荐nvm

• 1️⃣、nvm安装与配置

二、包管理工具

建议包管理工具优先使用排序如下：pnpm > yarn > npm。

其中pnpm不适用以下场景: Electron 应用或部署在lambda 上的应用无法使用 pnpm， 可以看作者开的issue: pnpm不适用场景

• 1️⃣、npm配置
• 2️⃣、yarn管理
• 3️⃣、pnpm配置(抱歉我还没写，后续补上)

三、代码托管——git

前提是你的项目托管是使用git的方式进行托管而不是svn

• 1️⃣、git安装
• 2️⃣、ssh配置
• 3️⃣、sourceTree可视化工具(抱歉，我还没写，以后补上)

四、编码工具——vscode

我不选webstrom的原因是，内置很多东西，而我每天基本需要打开两个以上前端项目和一些后端的IDEA工具，然后我试过很多次，同时打开多个webstrom，很卡崩，所以我几乎很少用它，虽然知道它是yyds，但是对于运行两个及以上的前端项目，我还是不建议使用webstrom！

• 1️⃣、vscode安装与配置
• 2️⃣、vscode扩展推荐待更新，分类整合

五、其他——仅作了解

专栏里的其他没有提及的内容，是属于我的零散笔记，后续分类后，整理再记录。请以这个指引为主

🌸nodejs版本管理

• 1️⃣、仅作了解Windows下的多版本node相关知识
• 2️⃣、仅作了解nvm命令

🌸包管理

• 1️⃣. 仅作了解为什么要使用 pnpm?