本文出自 我的 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
如果要使用 Android 内置的虚拟机来运行 App 的话,还需要下载对应版本的 System Image,这里我们不再赘述
点击 Install 按钮,等待安装完成

到此,Ionic 开发环境已安装完毕!
测试环境
安装完开发环境后,我们通过一个 Demo 来测试一下环境
打开终端,创建一个项目

项目创建完成后,Ionic 会自动添加一个 ios platform,所以无需重复添加

运行一下试试

运行成功!

可能存在的问题
- 使用 npm 全局安装时提示权限错误
解决这个问题的办法可以参考 这篇文章
结语
本文写给 Ionic 入门开发者,有开发经验者可以略过
如在安装过程中遇到问题,请在文章下方留言,我在收到留言后会及时答复您
网友评论