web_03 | Web 前置知识——工欲善其事，必先利其器：软件安装、环境搭建

本文推荐 PC 端阅读~

本文版权归 “公众号 | 前端一万小时” 所有，未经授权，请勿转载！
复制代码

前言： 在上一篇《初次接触前端，我们要理解哪些名词？》中，我们了解了初识前端应该掌握的名词、概念，其中也涉及了很多需要我们安装的软件、配置的环境等知识要点。本篇我们并不会机械的走一遍安装的流程，因为只要你学会了“科学的上网”，那么安装软件仅仅是：打开相应软件的官网→ DOWNLOAD→ 一直“下一步”（国外的软件一般比较良心，不会出现其他捆绑安装等）。本篇的重点是：跟着行文顺序，你我都动起手来，借安装软件的机会，熟悉新的浏览器、新的搜索方式以及最直观的先看看我们接下来会时时用到的这些伟大的、可爱的工具们。（阅读过程中，遇生疏的名词，请翻阅上一篇的相关解释，本篇不作赘述）

1 科学的上网

学习前端过程中，最基本和经常的操作就是：搜索和检查。

1.1 搜索

1.1.1 工具：Chrome 浏览器

官网、或百度搜索安装。

1.1.2 让 Chrome 浏览器可以登录国外网站（特别重要的一步）

敏感操作——搭梯子，请自行操作;
检验标准：能登录 YouTube 。

1.2 检查

后边无论学 HTML、CSS、JS 还是 Ajax 等，这个检查的动作都是最经常用到的动作。

在浏览器中的任何网页上，鼠标右键，然后弹出的选项中选择“检查”；
会出现我们本页面的相关代码——DOM 树（Document Object Model 文档对象模型）；

我们通过 JS 操作页面的元素，进行添加、移动、改变或移除的方法和属性，都是 DOM 提供的。

通过点击代码框左上角图标，可以实时查看网页内任意模块对应的代码（鼠标放在任意地方，代码框里就会显示与之对应的代码）；
按建盘上 Esc 键，或直接点击代码框的 Console，就可以打开 Console ；

作用：用于调试 JS 的；
比如：有一个样式没有出来，那么代码框与之对应的代码会报错，可以让我们知道错在哪里。

2 Git的安装

?Git 中文使用文档——作为参考手册，需要时翻翻

2.1 安装方式

谷歌搜索安装（点击 DOWNLOAD 后，直接下一步）——注：macOS 系统在安装了 Xcode 后会自带 Git 。

2.2 注意事项

针对 windows 用户，Git 最好直接安装在 C 盘。因为 windows下这些软件总会出现些莫名的小问题，直接安装在 C 盘会支持的相对好一些。

2.3 安装完成

安装完成后，里边会相应附带有 Git Bash 。可以打开 Git Bash 客户端（苹果电脑用户打开自有终端），初次使用需要输入相关命令行（先照做，后边文章会具体谈到）：

git config --global user.name xxx          →方便产品经理找你（xxx是输入我们自己的用户名）
git config --global user.email yyy         →方便产品经理找你（yyy是输入你的邮箱）
git config --global push.default simple
git config --global core.quotepath false   →防止文件名变成数字
git config --global core.editor "vim"      →使用vim编辑提交信息
复制代码

2.4 外观设置

（针对 windows 用户）设置一下 Git Bash 客户端的外观。

2.4.1 将操作界面设置成透明，方便操作、观察变化

2.4.2 将界面滚动条设置在右侧

2.4.3 设置编码方式

3 Node.js安装

3.1 安装方式

谷歌搜索安装（点击 DOWNLOAD 后，直接下一步）；

3.2 注意事项

针对 windows 用户，Node.js 最好直接安装在 C 盘。因为 windows 下这些软件总会出现些莫名的小问题，直接安装在 C 盘会支持的相对好一些。

3.3 安装完成

装了 Node.js 之后我们就可以在 Git Bash 里面使用 node 和 npm 这两个命令了（下载安装 Node.js 后，其附带了 npm），打开 Git Bash 试试看：

3.3.1 查看 node 和 npm 在电脑的哪个位置

which node
which npm
复制代码

3.3.2 查看 node 和 npm 的版本号

node -v
npm -v

或

node --version
npm --version
复制代码

3.3.3 试着用 npm 做一个命令行的翻译工具（这个小工具的名字叫做 fanyi）

npm i -g fanyi
复制代码

3.3.4 加载完成后，输入

fanyi hello
复制代码

相关中文解释就会出来，还会给你发音。
⚠️注意：

如果遇到以下“权限问题”：
请如下操作：（参考：处理npm权限问题）

3.3.5 试着用 node 做个算数

node
复制代码

回车后便进入了 node 运行环境，这时候我们就可以用 node 写 JS 了：

1+2
复制代码

4 编辑器的安装

4.1 安装方式

谷歌搜索安装（点击 DOWNLOAD 后，直接下一步）。

4.2 编辑器的选择

上一篇文章中介绍的编辑器任选其一，我个人比较倾向于 Sublime Text 和 webstorm 。

4.3 建议

初学的前半个月，个人强烈建议用记事本/文本编辑器把代码一个个敲出来，熟悉基本结构。

4.4 Emmet 语法

针对代码编辑器，会引入一个名词： Emmet 语法。目前所有的前端编辑器都支持 Emmet 。提高代码录入效率。

后记： 以上就是最基本的安装和配置，至于具体使用，初期不用深挖，随着学习的深入，带着疑问去寻找答案是最好的学习方式。
我们上边已经初试了牛刀，不得不佩服，这些工具之强大，我们该感到庆幸，庆幸置身在了这个年代，有这么多的资源，我们肯定能把前端搞定。
学无止境，它值得你我用后边的 10000 小时来对待。

加油！