2.1 Ionic快速上手环境安装
Ionic开发调试环境是基于Node.js运行的，而Ionic的公开源代码包又托管在Github上。因此安装Ionic正式开发调试环境前，需要有一些前置的平台工具先能成功运行。本节将依次介绍这些平台工具的安装和对它们的功能进行简单说明。
提示
本节涉及的软件包安装过程在Windows和Mac OS下基本一致，读者基本可以登录这些软件的官网自行解决安装中遇到的问题。因此碍于篇幅关系，笔者在本节不详细介绍Mac OS操作系统环境下的安装过程，而只以占读者比例最多的Windows操作系统环境来演示。如确实有特殊明显的区别，笔者会在具体的章节里依据情况说明。
2.1.1 安装Node.js和NPM
1．什么是Node.js和NPM
Node.js是让JavaScript脱离浏览器运行在服务器的一个平台，而不是一个新的语言或者库。虽然Node.js采用的是单线程机制，但是它通过异步IO与事件驱动的设计来实现了高并发服务。此外Node.js内建一个HTTP服务器可方便地用于测试和生产运行。在App应用开发的过程中，我们将要在浏览器中调试的Ionic代码就是通过Node.js的HTTP服务来响应请求和执行文件修改后动态reload（重新加载）机制，因此能够运行Node.js是成功安装Ionic的前提条件。
NPM是Node.js的包管理器，它已经被自动包含在目前Node.js的安装包里，不再需要单独安装。在使用Ionic的CLI生成完Ionic工程目录和描述工程所用到的Node.js代码包的配置文件package.json之后，NPM会被自动调用以下载安装这些Node.js代码包。
提示
本书不是关于Node.js的入门书，因此不会花过多笔墨介绍Node.js和NPM。感兴趣的读者可以到这两个软件的官网自行阅读文档学习。
2．安装Node.js和NPM
笔者编写本书时，可以成功安装运行Ionic的Node.js版本为v8.9.0，因此建议读者可以在开发机的命令行内输入：
node –v
判断是否已经安装了正确的Node.js和NPM版本，如图2.1所示。
图2.1 查看当前操作系统安装的Node.js、NPM版本
如果Node.js未安装或者版本太旧需要升级，建议读者到图2.2中显示的Node.js中文网http://nodejs.cn/download/，根据所使用的操作系统选择对应的Node.js包安装。
图2.2 Node.js的官网下载选择安装包
由于中国国情的关系，使用NPM下载安装某些软件包时需要使用一些不可详细描述的技术手段改变联网状态。因此推荐读者在安装或升级完Node.js后运行以下命令安装淘宝提供的NPM软件包库的镜像CNPM，安装命令的成功输出如图2.3所示。
npm install-g cnpm--registry=https://registry.npm.taobao.org
图2.3 使用NPM安装CNPM
命令成功执行完毕后，以后使用NPM命令的地方就都可以用CNPM来代替了。有一些读者可能会选择不安装CNPM，所以接下来文中的内容依然使用NPM命令，安装了CNPM的读者可以自行替换。
提示
本书介绍的关于CNPM的内容也许会随着时间流逝而可能不再正确。具体权威的CNPM说明和其提供的专有命令请参考CNPM的官网：https://npm.taobao.org/。
到目前为止，Node.js和NPM的安装就算基本完成了，读者可以回顾一下图2.1，运行图中的3个命令检查一下开发机的软件版本是否正确（版本号大于等于图中数字即可）。
2.1.2 安装Git
Git是目前世界上最先进的分布式版本控制系统。和Git出现前流行的集中式的版本控制系统CVS、SVN及收费版的ClearCase相比，Git所代表的分布式版本控制系统为开发者带来了极大的便利，同时丢失代码的可能性也减小很多。目前基本所有的开源项目都发布在使用Git的Github网站上，Ionic开发框架这个开源项目也是如此（项目在Github的网址为https://github.com/ionic-team/ionic）。
因此使用Ionic框架的开发者，需要在开发机安装好Git。这样当使用Ionic CLI创建项目时，将会自动调用Git的命令，从Github把最新的Ionic模板与支持文件下拉到本地目录。
1．Windows操作系统环境下Git的安装
笔者推荐使用Windows操作系统环境的读者到图2.4展示的Git开发组提供的专门网站https://git-scm.com/download/win自动下载最新版的Git安装包并按提示安装即可。
图2.4 Git的官网下载网站
2．Mac OS操作系统环境下Git的安装
笔者推荐使用Mac OS操作系统环境的读者使用Homebrew来安装Git。首先读者可以在Terminal窗口输入：
brew
通过Terminal窗口的提示可知Homebrew是否已被安装。如果Homebrew尚未安装，读者需到Homebrew的官方网站（https://brew.sh/index_zh-cn.html）依据说明安装，如图2.5所示。因为官网已提供中文版的完整说明和命令代码，这里不再详述Homebrew的安装过程。
图2.5 Homebrew官网安装说明
提示
读者也可以使用其他方式在Mac OS操作系统环境下安装Git。因为本书的12.1节也需要使用Homebrew来安装MongoDB，所以这里笔者仅推荐了使用Homebrew的安装方式。
确认Homebrew可以正常工作后，安装Git就很简单了。继续在Terminal窗口输入：
brew install git
即可进入Git的安装。安装完毕后可输入：
git-–version
验证Git是否成功安装以及被安装的版本，如图2.6所示。
图2.6 验证Git是否成功安装以及被安装的版本
2.1.3 安装Gulp和Bower
Gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器。她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成。具体来说，Gulp是基于Node.js的自动任务运行器，它能自动化地完成JavaScript、SASS/SCSS、HTML、CSS等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定这些步骤。在实现上，它借鉴了UNIX操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。
Bower是用于Web前端开发的Node.js包依赖管理器。对于前端包管理方面的问题，它提供了一套通用、客观的解决方案。它通过一个API暴露包之间的依赖模型，这样更利于使用更合适的构建工具。Bower没有系统级的依赖，在不同包之间也不互相依赖，依赖树是扁平的。
Ionic框架同时使用了Gulp和Bower作为安装与构建工具链的一部分，因此这两个工具都需要在命令行工具中使用NPM安装好：
npm-g install bower gulp
提示
Windows如果安装失败，可以右键选择以管理员身份运行解决权限问题。Mac下安装可以在命令前加入sudo来运行安装命令，否则可能会出现当前登录的用户权限不够，无法将文件复制到指定目录的错误提示。后文中命令行的指令在Mac下执行失败，都可以试着加上sudo解决权限问题。
安装过程完成后分别输入以下两条命令验证Gulp和Bower的正常安装与版本，如图2.7所示。
bower--version
gulp--version
图2.7 验证Gulp和Bower是否成功安装以及被安装的版本
提示
一般的前端项目需要在项目目录里再次使用NPM以项目模式安装Gulp，因为Ionic的项目模板已在其package.json里描述了对Gulp模块的依赖，因此后面的构建过程不需要进行类似的安装了。
如果电脑缺少Python环境，会导致npminstall命令失败。Python官方网站https://www.python.org，文中的下载地址https://www.python.org/ftp/python/2.7.14/python-2.7.14.amd64.msi，Python环境配置完成后重新执行NPM的安装指令即可。
下载好安装包后，选择安装路径进行安装即可。最后我们需要配置一下Python的环境，如图2.8所示。
path=%path%;c:\Python27
python--version
图2.8 Python命令行配置环境和验证安装的版本
如果配置后仍然没有生效，可以选择手动配置。右击我的电脑，选择属性，选择高级系统设置进行配置，如图2.9所示。
图2.9 Python手动配置环境
Mac用户则使用Homebrew安装即可。
brew install python
2.1.4 安装Ionic CLI与Cordova
完成了前面的铺垫之后，现在可以开始安装Cordova和Ionic CLI了。首先需要在命令行工具中使用NPM安装这两个工具包：
npminstall-gcordova@7.0.1 ionic@3.18.0
提示
这里安装Cordova和Ionic CLI时指定了安装的特定版本号，这是因为笔者编写此书时所使用的开发环境就是这两个当前最新的版本。为了保证后面的讲解使读者能够在自己的开发环境中完全重合，笔者建议读者朋友在学习时除非很有把握，否则最好不要随意升级改变它们的版本。
由于中国互联网的特殊状况，使用NPM安装Cordova和Ionic CLI的过程中可能会出现一些依赖包无法下载而安装失败的现象。不幸中招的读者可以使用CNPM替换命令中的NPM，尝试使用本章2.1.1节介绍的淘宝提供的NPM软件包库的镜像绕过此类问题。
安装过程完成后分别输入以下两条命令验证Cordova和Ionic CLI的正常安装与版本，如图2.10所示。
cordova-v
ionic-v
图2.10 验证Cordova和Ionic CLI是否成功安装以及被安装的版本
直接在命令行工具中运行Ionic命令即会出现Ionic的任务提示界面：
ionic
图2.11中显示了Ionic CLI支持的子命令集和对应的说明。
提示
图2.11的示例图截取的是Mac OS操作系统中的命令行提示，在Windows操作系统中的提示结果内容应该类似。
图2.11 Ionic的任务提示界面
2.1.5 安装设置Chrome浏览器（推荐）
在运行Ionic CLI创建一个项目之前，笔者推荐先安装好Google Chrome浏览器，并将其设为系统的默认浏览器。该浏览器的内置开发者工具非常强大，而且在调试实体Android设备的Webview应用时可以连接其控制台（console），获取实时的调试信息。建议读者到其中文版官方网站下载，如图2.12所示，安装地址为http://www.google.cn/chrome/browser/desktop/index.html。如果因网络问题无法连接官方网站，再考虑到国内的软件下载网站去找，这里笔者就不一一指出了。
图2.12 Google Chrome浏览器官方网站下载
完成Google Chrome浏览器安装后，Windows和Mac OS操作系统的用户分别按F12键/command+option+I键，打开Chrome的开发者工具，将各窗口布局调整成如图2.13中所示的模式。这种布局模式的好处是左边显示了App应用的模拟显示界面。当开发人员在右方窗口对HTML/CSS/JavaScript代码做出任何调整的时候，左边的页面渲染将会即时反映出代码的效果；而当开发人员操作左方的界面元素产生动画等效果时，也可以实时看到右方代码窗口里的CSS类被动态改变。这种布局模式能充分利用宽屏显示器的优势，推荐读者采纳。
图2.13 建议的Chrome调试模式窗口布局
对调整不太熟悉的读者可以参考点击图2.14中注释出来的按钮，这样就能比较容易获得图2.13的效果。
图2.14 Chrome调试模式布局调整按钮
2.1.6 Hello Ionic项目
现在终于可以创建一个Ionic的测试样例项目来感觉一下了。在命令行输入：
ionic start HelloIonic blank
Ionic的CLI会开始使用Git从Github网站上抓取正式版的Ionic框架源代码，经过一段时间的等待（等待时间跟网络环境有关），会显示如图2.15所示的界面，之后等待npminstall命令完成即可。安装对iOS和Android移动操作系统平台的支持，我们会在本章的后续内容里逐一介绍。
图2.15 IonicCLI完成初始化项目框架提示界面
提示
在之前的版本需要手动执行npminstall，而新版本的Ionic中，CLI会自动执行npminstall命令，等待安装完成即可。由于国内网络状况会有可能失败。这个问题可以通过在项目的根目录下运行命令cnpm install来解决。
按照图2.16的提示，进入项目目录后在命令行窗口中输入：
ionic serve
Ionic CLI将开始Web构建过程，进入命令状态，并启动默认的浏览器打开App应用，如图2.16所示。
图2.16 Ionic CLI命令状态
2.1.7 使用浏览器验证开发环境自动重载特性
Ionic框架为浏览器环境开启变更自动重载。开发者更改了项目代码并保存后，浏览器会自动刷新反映变化。图2.17是初始页面的内容，注意顶栏标题为“Ionic Blank”。
图2.17 页面初始显示
随后读者可以尝试使用文本编辑器打开项目目录中www字母下的index.html文件，找到“Ionic Blank”文本字样后将其改为“Hello Ionic”并保存文件。无须手动刷新，浏览器就会自动刷新页面，如图2.18所示，注意顶栏标题已变为“Hello Ionic”。
图2.18 页面重新加载后顶栏标题显示的文本更新