Ionic 开发环境搭建（Windows）

2016-06-23 本文已影响13214人云鹏1943

Ionic 概述

Ionic 官网：http://www.ionicframework.com/
Ionic 是一个强大的 HTML5 SDK，它使用 HTML、CSS、Javascript 等 web 技术帮助你快速构建原生风格的移动应用
Ionic 目前能支持 iOS 和 Android

与 Cordova 的关系

Ionic 是基于 Cordova 的，在 Cordova 上能用的一切同样可以在 Ionic 上使用
Ionic 在 Cordova 基础上增加了 Ionic UI、AngularJS、一个强大的 CLI 工具和一些云端服务等

安装 Ionic

Ionic 的开发环境离不开下列组件：

Node.js
Cordova & Ionic CLI
Java SDK
Android SDK

安装 Node.js

前往 Node.js 官网下载 Node.js 安装包直接安装，建议下载 LTS 版本，笔者安装的是 v4.4.5 LTS
安装的过程中默认勾选的“Add to PATH”选项不要取消

安装完成后打开终端，输入“node -v”命令，能正常现实版本号说明安装成功

安装 cnpm (可选)

npm 是 Node.js 的包管理器，由于我大天朝网络环境的原因，在使用 npm 的时候经常无法安装包或者下载很慢
于是我们需要一个 npm 的中国镜像，cnpm 是淘宝的 npm 镜像，10分钟同步一次
以管理员身份打开终端，输入“npm i cnpm -g”命令，等待安装完成

安装完成后，输入“cnpm -v”命令，能正常显示版本号说明安装成功

安装 Cordova & Ionic CLI

以管理员身份打开终端，输入“npm i cordova ionic -g”命令，等待安装完成

如果安装了 cnpm，可以使用“cnpm i cordova ionic -g”命令

安装完成后，输入“cordova -v”命令和“ionic -v”命令，能正常现实版本号说明安装成功

安装 Java SDK (jdk)

前往 Oracle 官网下载最新的 jdk 安装，我下载的是 jdk 8u91 windows x86 的版本

由于很多依赖 Java 的项目都不支持64位的 jdk，所以建议大家下载安装 x86 版本
安装过程中可以只安装 jdk，不安装 jre 和源代码

为 jdk 设置系统环境变量

打开系统属性，在“高级”选项卡中找到环境变量，单击打开“环境变量”设置窗口

在“系统变量”列表中新建一个系统变量“JAVA_HOME”，值为刚才安装的 jdk 的路径

在“系统变量”列表中找到“Path”变量，双击打开“编辑系统变量”窗口
将 jdk 的 bin 路径添加至“变量值”末尾并保存

安装完成后打开终端，输入“java -version”命令，能正常现实版本号说明安装成功

安装 Android SDK

前往 Android 官网下载最新的 Android SDK 安装，目前最新的版本是 r24.4.1，我下载的是 zip 版本
下载完后解压到“C:\Program Files(x86)\Android\”目录下

为 Android SDK 设置系统环境变量

在“系统变量”列表中新建一个系统变量“ADT_HOME”，值为刚才安装的 Android SDK 的路径

在“系统变量”列表中找到“Path”变量，双击打开“编辑系统变量”窗口
将 Android SDK 的 tools 和 platform-tools 路径添加至“变量值”末尾并保存

设置完成后打开终端，输入“android”命令，能打开 Android SDK Manager 窗口说明安装成功

使用 Android SDK Manager 安装所需组件

Android SDK 各版本的 SDK Platform 和 Tools 并没有内置在 Android SDK 中，所有我们要通过 Android SDK Manager 来安装
打开 Android SDK Manager 后，选择要安装的组件
由于我一般是用真实 Android 设备来开发，所以我只选择了 Android SDK Tools、Android SDK Platform-tools、Android SDK Build-tools、Android Support Repository、Google USB Driver，以及Android API 19-24 的 SDK Platform