第 1 章 配置开发环境

第 1 章 配置开发环境

新葡京娱乐场:”  目前,各界都在等待法国警方尽快彻查此事并做出合理的解释。

前端开发领域有着数不清的工具和资源,而且还有更多工具在被源源不断地制造出来。无论开发者的水平如何,选择最佳工具都极具挑战性。本书的项目将会带你使用一些本书作者非常喜爱的工具。

首先你需要三个基本工具:浏览器、文本编辑器,以及好用的前端开发技术参考文档。此外还有一些能够提升开发体验的附加选项,当然它们并非必需品。

为达到最佳效果,建议你和本书作者使用相同的软件。本章会引导你安装并配置Google Chrome浏览器、Atom文本编辑器、Node.js以及一些插件。另外还会介绍一些优秀文档,并针对Mac和Windows命令行进行一次突击学习。在下一章开始第一个项目时,这些资源将会派上用场。

1.1 安装Google Chrome

默认情况下,你的电脑应该已安装过浏览器,但前端开发中最好用的浏览器还是Google Chrome。若尚未安装最新版Chrome,可以通过www.google.com/chrome/browser/desktop获取(如图1-1所示)。

{%}

图1-1 下载Google Chrome

1.2 安装并配置Atom

在众多文本编辑器中,GitHub出品的Atom是前端开发的最佳选择之一。它可以进行大量配置,也有很多辅助编码的插件。另外,它可以免费下载使用。

可以通过atom.io下载Mac版或Windows版的Atom(如图1-2所示)。

{%}

图1-2 下载Atom

遵循安装指引即可。安装成功后,还需要安装一些可能用到的插件。

Atom插件

对于一款文本编辑器来说,最需要的无非是文档查询、自动补全、代码格式化以及代码提示(接下来会细说)功能。Atom默认提供了一部分功能,但安装一些插件后效果会更好。

打开Atom的Settings面板。在Mac上,选择Atom → Preferences...,或者使用Command + ,(Command加逗号)快捷键。在Windows上,点击File → Settings或者按Control + ,快捷键。

左侧就是Settings面板,点击+ Install(如图1-3所示)。

{%}

图1-3 Atom Install Packages面板

可以根据名称搜索插件,先搜索“emmet”试试看。

书写大量HTML是很枯燥的,而且容易出错。通过emmet插件(如图1-4所示),可以用一些速记符生成符合语法规则的HTML。点击Install按钮开始安装emmet。

{%}

图1-4 安装emmet

然后再搜索“atom-beautify”。该插件(如图1-5所示)可辅助缩进,提高代码可读性。同样还是点击Install进行安装。

{%}

图1-5 安装atom-beautify

接着搜索并安装autocomplete-paths(如图1-6所示)。在代码中,经常需要引用其他文件或目录。该插件能够在输入文件名时提供自动补全功能。

{%}

图1-6 安装autocomplete-paths

接下来安装api-docs(如图1-7所示),这样就可以通过键盘查阅文档。文档会在编辑器单独的一个标签面板中显示。

{%}

图1-7 安装api-docs

下面安装linter(如图1-8所示)。linter是一个用来检查代码语法和风格的程序。请确认你安装的插件就叫作linter。这是一个基础linter,与特定语言插件搭配使用效果更佳;有了它,才能使用后续其他linter插件。

{%}

图1-8 安装linter

要使用linter检查CSS、HTML和JavaScript代码,还需安装另外三个插件。首先安装linter-csslint(如图1-9所示),该插件在保证CSS代码语法正确的同时,还能提供编写高性能CSS的建议。

{%}

图1-9 安装linter-csslint

然后是linter-htmlhint(如图1-10所示),它确保HTML代码保持良好的格式。当HTML标签匹配错误时,编辑器会显示警告信息。

{%}

图1-10 安装linter-htmlhint

最后一个linter插件是linter-eslint(如图1-11所示)。它能检查JavaScript代码的语法,还能通过配置检查代码的风格和格式(如每行缩进几个空格,注释前后空几行等)。

{%}

图1-11 安装linter-eslint

现在Chrome和Atom都安装好了,但还需要做一些完善编码环境的工作:访问参考文档、学习命令行基础知识、安装最后两个工具。

1.3 文档和参考资料

前端开发与针对iOS和Android等平台的开发有所不同。抛开显而易见的差异不说,除了技术规范之外,前端技术是没有官方开发者文档的——这意味着需要另寻他处,找到编码指南。建议你熟悉下列资源,并在阅读本书和继续前端开发的过程中养成经常查阅文档的习惯。

Mozilla开发者网络(MDN)是HTML、CSS和JavaScript最好的参考文档,可以通过devdocs.io访问。这是一个优秀的文档界面(如图1-12所示),它从MDN上拉取前端核心技术文档,而且还能在离线状态下查阅。

{%}

图1-12 通过devdocs.io访问文档

注意,Safari目前尚不支持devdocs.io所用到的离线缓存机制;如需访问,可使用Chrome这样的浏览器。

还可以访问MDN的官方网站developer.mozilla.org/en-US(如图1-13所示),或在搜索引擎中搜索“MDN”以获取所需信息。

{%}

图1-13 MDN官网

另一个需要知道的网站是stackoverflow.com(如图1-14所示)。严格说来,它并非文档源,而是一个开发者讨论社区。问题答案的质量视情况而定,但通常非常全面,很有帮助。这是很有用的资源,但需要记住,因其众包特性,答案并不具有权威性。

{%}

图1-14 Stack Overflow网站

Web技术在不断演进。随着时间推移,不同浏览器对特性和API的支持会有所不同。有两个网站可以帮你判断某个特性被哪些浏览器(以及该浏览器的哪些版本)所支持,它们是html5please.com和caniuse.com。需要查询特性支持程度时,建议使用html5please.com查询该特性是否被推荐使用;需要了解浏览器的哪些版本支持某一特性时,则可以访问caniuse.com。

1.4 命令行速成

命令行(或称为终端)的使用贯穿全书,其中用到的许多工具都只会在命令行中运行。

要在Mac上访问命令行,需要打开Finder,依次进入Applications、Utilities文件夹,找到并打开名为Terminal的程序(如图1-15所示)。

图1-15 在Mac上找到Terminal程序

然后会看到如图1-16所示的窗口。

图1-16 Mac命令行

要在Windows上访问命令行,请打开“开始”菜单,搜索“cmd”,找到并打开名为Command Prompt的程序(如图1-17所示)。

图1-17 在Windows上找到Command Prompt程序

点击即可运行Windows下的标准命令行界面,如图1-18所示。

{%}

图1-18 Windows命令行

从现在起,将用“终端”或“命令行”统一指代Mac的Terminal和Windows的Command Prompt。若不熟悉命令行的使用,下面会介绍一些常见任务的命令。在窗口中输入命令后,按下回车键执行命令——所有命令都是如此。

1.4.1 查看当前工作目录

命令行是以当前位置为基础的,这意味着在任意给定时间点上,它总会“位于”文件结构的特定目录中,所有输入的命令都在该目录中执行。命令行窗口显示了当前目录的缩写。要在Mac上查看完整路径,请输入pwd(即print working directory,打印工作目录)命令,如图1-19所示。

图1-19 在Mac上使用pwd展示当前路径

在Windows上使用echo %cd%命令查看当前路径,如图1-20所示。

{%}

图1-20 在Windows上使用echo %cd%展示当前路径

1.4.2 新建目录

前端项目的目录结构非常重要。项目的增长可能很快,所以最好从一开始就保持良好的结构。在开发过程中会经常创建新目录,通过mkdir(即make directory,创建目录)命令加上新目录名称即可新建目录。

下面就为本书将要创建的所有项目新建一个目录。输入以下命令:

mkdir front-end-dev-book

紧接着,为第一个项目Ottergram新建一个目录,该项目会在下一章介绍。要创建的目录是刚新建的front-end-dev-book的子目录。因此,在主目录中的新目录名前面加上父级目录名以及一个斜杠(在Mac上):

mkdir front-end-dev-book/ottergram

在Windows上,请使用反斜杠:

mkdir front-end-dev-book\ottergram

1.4.3 切换目录

要在文件结构中切换目录,请使用cd(即change directory,切换目录)命令,其后加上要进入的目录路径。

使用cd命令时,不用每次都输入完整目录路径。例如,要进入当前目录的某个子目录时,只需该子目录名称即可。当处于front-end-dev-book目录时,ottergram目录的路径就是ottergram。

进入新项目目录:

cd front-end-dev-book

现在进入ottergram目录:

cd ottergram

要进入父级目录,使用命令cd ..(即cd后面加上一个空格和两个句点)。两个句点代表父级目录的路径。

cd ..

记住,可以通过pwd(在Windows上是echo %cd%)命令查看当前目录。图1-21展示了作者新建目录、切换目录和查看当前目录的操作。

图1-21 切换、查看目录

每次切换目录不限于向下或向上一层。假设有一个结构更复杂的目录,如图1-22所示。

图1-22 文件结构示例

假设你现在在ottergram目录中,想要切换到coffeerun目录下的stylesheets。这可以通过在cd后面加上一个路径实现,该路径表示“当前所在目录的父级目录下的coffeerun目录中的stylesheets目录”:

cd ../coffeerun/stylesheets

在Windows上,命令是相同的,但要用反斜杠:

cd ..\coffeerun\stylesheets

1.4.4 列出目录中的文件

有时可能需要查看当前目录下有哪些文件,这在Mac上可以使用ls命令实现(如图1-23所示)。若想查看另一个目录下的文件列表,可以在命令后面加上相应路径:

ls
ls ottergram

{%}

图1-23 使用ls列出目录中的文件

若目录为空,ls默认不会打印任何内容。

在Windows上,对应的命令是dir(如图1-24所示),也可以加上可选路径:

dir
dir ottergram

{%}

图1-24 使用dir列出目录中的文件

dir命令会默认打印出日期、时间、文件大小等信息。

1.4.5 获取管理员权限

在某些版本的OS X和Windows上,可能需要超级用户或管理员权限才能执行一些命令(如安装软件、修改受保护文件等)。

在Mac上,可以在命令前加上sudo获取权限。首次使用sudo时,会有如图1-25所示的警告出现。

{%}

图1-25 sudo警告

sudo以超级用户身份执行命令之前会向你询问密码。输入密码时不会显示输入的内容,因此要小心,别输错。

在Windows上获取权限是在打开命令行界面的过程中完成的。在Windows的开始菜单中找到命令行选项,鼠标右键点击,选择Run as Administrator(如图1-26所示)。该命令行窗口中的所有命令都是以超级用户的身份运行的,因此同样要当心。

{%}

图1-26 以管理员身份打开命令行窗口

1.4.6 退出程序

在学习本书的过程中,你会通过命令行运行很多应用。有些应用在完成任务后会自动退出,但也有些应用在手动终止之前会保持运行。要退出命令行程序,使用Control + C快捷键。

1.5 安装Node.js和browser-sync

这是开始第一个项目之前的最后一个安装步骤了。

Node.js(简称Node)允许通过命令行运行用JavaScript编写的程序。大多数前端开发工具都要使用Node.js。第15章会介绍更多关于Node.js的内容,但眼下要用到一个依赖Node.js的工具——browser-sync。

若要安装Node,需要从nodejs.org(如图1-27所示)下载安装包。本书使用的是Node.js 5.11.1版本,你看到的版本可能有所不同。

{%}

图1-27 下载Node.js

双击安装包,根据提示操作。

Node自带两个命令行程序:node和npm。node的工作是运行JavaScript程序,在第15章之前还用不到它;而另一个程序npm则会在在线安装开源开发工具时用到。

browser-sync对本书的价值不可估量。有了它,示例代码在浏览器中的运行将更加方便;修改并保存代码时,浏览器也会自动重新加载。

在命令行中通过下面的命令安装browser-sync:

npm install -g browser-sync

(命令行中的-g表示global,即全局。以全局方式安装此工具,意味着可以在任意文件夹中执行browser-sync命令。)

运行此命令时所处的目录不影响结果,但可能需要超级用户权限。若如此,在Mac的命令前加上sudo

sudo npm install -g browser-sync

若在Windows上,则先以管理员身份打开命令行窗口(前文已提过)。

从下一章启动browser-sync后它便会一直运行,使用Control + C才能退出。完成一个项目之后,最好退出browser-sync。在本书的前两个项目(Ottergram和CoffeeRun)中,开始工作之前需要启动browser-sync。

通过前面的介绍和操作,Ottergram项目所需的工具已经准备好啦!

1.6 延展阅读:Atom的替代工具

可供选择的文本编辑器太多太多。如果对Atom不那么感兴趣,在跟着本书完成所有项目之后,可以试试下面两个文本编辑器。它们在Mac和Windows平台上都可以免费获取,而且都拥有大量插件,可以个性化开发环境。此外,它们和Atom一样,都是由HTML、CSS和JavaScript构建,但以桌面应用的形式运行。

Visual Studio Code是微软为Web应用开发量身定做的开源文本编辑器,可通过code. visualstudio.com下载(如图1-28所示)。

{%}

图1-28 Visual Studio Code官网

Adobe的Brackets文本编辑器专长于用HTML、CSS搭建UI。它还提供了一个扩展程序,帮助用户使用Adobe PSD文件。可以通过brackets.io下载Brackets(如图1-29所示)。

{%}

图1-29 Adobe Brackets官网

目录

  • 版权声明
  • 献词
  • 前言
  • 致谢
  • 第一部分 浏览器编程基础
  • 第 1 章 配置开发环境
  • 第 2 章 开始第一个项目
  • 第 3 章 样式
  • 第 4 章 flexbox响应式布局
  • 第 5 章 使用媒体查询完成自适应布局
  • 第 6 章 JavaScript事件处理
  • 第 7 章 使用CSS营造视觉效果
  • 第二部分 模块、对象及表单
  • 第 8 章 模块、对象和方法
  • 第 9 章 Bootstrap简介
  • 第 10 章 使用JavaScript处理表单
  • 第 11 章 从数据到DOM
  • 第 12 章 表单校验
  • 第 13 章 Ajax
  • 第 14 章 Deferred和Promise
  • 第三部分 实时数据传输
  • 第 15 章 Node.js入门
  • 第 16 章 使用WebSocket进行实时通信
  • 第 17 章 借助Babel使用ES6
  • 第 18 章 继续ES6探索之旅
  • 第四部分 应用架构
  • 第 19 章 初识MVC和Ember
  • 第 20 章 路由选择、路由表、模型
  • 第 21 章 模型和数据绑定
  • 第 22 章 数据——适配器、序列化器和变换器
  • 第 23 章 视图与模板
  • 第 24 章 控制器
  • 第 25 章 组件
  • 第 26 章 后记
合作: 真钱金花 皇冠开户网 新葡京娱乐场