Ionic 开发环境搭建（macOS）

2016-07-09 本文已影响304人云鹏1943

本文出自我的 github

在上一篇文章中介绍了 Windows 下 Ionic 开发环境的搭建，这篇文章主要介绍 macOS 下 Ionic 环境搭建

开始安装 Ionic

Ionic 的开发环境需要安装的组件：

Node.js
Cordova & Ionic CLI
Java SDK
Android SDK

安装 Node.js

前往 Node.js 官网下载 Node.js 安装包直接安装，我下载的是 v4.4.5 LTS，通过官网下载到的是 pkg 包，鼠标双击安装即可

由于之前我用 Homebrew 遇到过这样那样的问题，所以果断改用官网提供的 pkg 包来安装了，喜欢折腾的朋友可以使用 Homebrew 或者其它方式去安装

安装完成后打开终端输入 “node -v” 命令测试下是否安装成功

更新 npm（可选）

在终端输入 “npm i npm -g” 命令更新npm

安装 Cordova & Ionic CLI

在终端输入 “npm i cordova ionic -g” 命令，等待安装完成；安装完成后，输入 “cordova -v” 命令和 “ionic -v” 命令，能正常显示版本号说明安装成功

安装 Java SDK (jdk)

前往 Oracle 官网下载最新的 jdk 安装，我下载的是 jdk-8u91-macosx-x86.dmg

为 jdk 设置系统环境变量

安装好 jdk 之后，在终端输入 “vim ~/.bash_profile” 打开 vim 来编辑 .bash_profile 文件，增加一行 export JAVA_HOME=$(/usr/libexec/java_home)，建议和其它 export 项放在一起便于维护

不熟悉 vim 操作的朋友可以参考这个 vim 教程

安装 Android SDK

前往 Android 官网（需要翻墙）下载最新的 Android SDK 安装，目前最新的版本是 r24.4.1；你也可以复制这个链接，然后使用迅雷下载，然后解压到 “/Developer” 目录下

为 Android SDK 设置系统环境变量

在终端输入 “vim ~/.bash_profile” 打开 vim 来编辑 .bash_profile 文件，增加一行 export ANDROID_HOME=/Developer/android-sdk-macosx，和一行 export PATH=${PATH}:${ANDROID_HOME}/tools:${ANDROID_HOME}/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，以及Android API 19-24 的 SDK Platform