原文发表于我的技术博客本文是「Ionic 入门与实战」系列连载的第二章第一节主要对 Ionic 的开发环境配置做了简要的介绍本文介绍的开发环境为 Mac 系统Windows 系统基本类似少许差别请查阅相关文档即可。原文发表于我的技术博客1. Ionic 环境的安装1.1 Node.js 与 npm 介绍Node.js 与 npm 是 Ionic 环境的基础这里我们做一下简要介绍。Node.js 是基于 Chromes V8 JavaScript engine 构建的一个JavaScript runtime 一般翻译为 JavaScript 运行时特点是事件驱动、非阻塞等。npm 是 Node.js 中的 JavaScript 包管理。目前已经是最大的开源组件库使用起来非常方便也非常值得学习。以上两个组件只需要安装 Node.js 即可。Mac 系统中下载 pkg 安装Windows 系统中下载对应的 msi 安装注意 32 位和 64 位版本的区别。下载地址Node.js — Download Node.js®安装后可以通过node -v查看当前版本确认是否安装成功或者查看当前的 Node.js 版本。Ionic 推荐安装 Node.js 的版本为 v4.0即高于 4.0 的版本即可。1.2 Ionic 的安装这里使用最新的 v2.0 beta 版本进行学习而且 2.0 版本对于 1.0 版本的所有功能都进行了兼容所以项目如果从 1.0 转成 2.0也是可以平滑过渡的。安装 Ionic使用以下命令即可。$ npm install -g ionicbeta如果需要安装 Ionic 1.0 版本使用如下命令即可。$ npm install -g ionic2.初始化空项目并体验安装了 Ionic 后使用如下命令初始化一个空项目名称为 ionicdemo。$ ionic start ionicdemo --v2ionic start命令默认采用 tabs template 作为初始化项目的模板如果需要其他的模板那么在项目名称后面添加上对应的模板名称即可如要使用 tutorial template 作为模板那么命令如下。$ ionic start ionicdemo tutorial --v2其他的模板列表参见这里。注意这里的--v2参数因为 ionic 命令是和 1.0 版本公用的所以添加--v2参数明确了使用2.0 版本去初始化项目。此过程主要安装了必要的 npm modules并且安装依赖的 Cordova 组件。这里还有一个技巧就是如果想使用 TypeScript那么只要在命令后面添加--ts参数即可。进入项目目录。$ cd ionicdemo运行在浏览器中查看效果。$ ionic serve当需要在浏览器中模拟 iPhone 下的 UI 展示需要选择对应的模拟设备刷新即可。这里的原理是 Chrome 修改了对应的 User-AgentIonic 根据此进行了对应的 UI 呈现。在控制台中可以看到。使用浏览器进行开发调试是非常方便的方案不需要频繁连接真机并且可以方便直观地借助 Chrome 控制台进行样式、JavaScript 等调试。如果需要在模拟器上运行那么 iOS 设备执行下面的命令即可。$ ionic run ios如果是 Android 设备那么执行下面的命令。$ ionic run android这样就可以在对应的模拟器上运行了至于详细的 iOS/Android 的环境配置我们在下面的章节将有详细地讲解。