工欲善其事，必先利其器——软件安装、环境搭建

本知识学习用时：1.5小时，总第3.5/10000小时

前言：在上一篇《初次接触前端，我们要理解哪些名词？》中，我们了解了初识前端应该掌握的名词、概念，其中也涉及了很多需要我们安装的软件、配置的环境等知识要点。

本篇我们并不会机械的走一遍安装的流程，因为只要你学会了“科学的上网”，那么安装软件仅仅是：打开相应软件的官网→DOWNLOAD→一直“下一步”（国外的软件一般比较良心，不会出现其他捆绑安装等）。

本篇的重点是：跟着行文顺序，你我都动起手来，借安装软件的机会，熟悉新的浏览器、新的搜索方式以及最直观的先看看我们接下来会时时用到的这些伟大的、可爱的工具们。

（阅读过程中，遇生疏的名词，请翻阅上一篇的相关解释，本篇不作赘述）

一、科学的上网

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

1. 搜索：

· 工具：Chrome浏览器

- 官网、或百度搜索安装；

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

- 敏感操作，请自行操作;

- 检验标准：能登录YouTube

2. 检查：

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

在浏览器中的任何网页上，鼠标右键，然后弹出的选项中选则“检查”；

会出现我们本页面的相关代码——DOM树（Document Object Model 文档对象模型）；

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

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

按建盘上Esc键，或直接点击代码框的Console，就可以打开Console;

- 作用：用于调试JS的；

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

二、Git的安装

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

安装后，里边会相应附带有Git Bash;

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

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

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

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

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

设置编码方式；

三、Node.js安装

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

下载安装Node.js后，其附带了npm；

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

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

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

查看node 和 npm 的版本号：

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

加载完成后，输入：

相关中文解释就会出来，还会给你发音哦。

⚠️注意：

-- 如果遇到以下“权限问题”：

-- 请如下操作：（详情谷歌搜索：处理npm权限问题）

试着用node做个算数：

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

四、编辑器的安装

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

任选其一，个人比较倾向于webstorm;

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

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

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

欢迎继续关注下文 ：

做一次山大王，让你的操作系统乖得像个小绵羊——命令行入门

（本文版权归前端一万小时所有，转载需说明来源）