Ionic 开发环境搭建(macOS)

作者: 云鹏1943 | 来源:发表于2016-07-09 16:07 被阅读304次

本文出自 我的 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 入门开发者,有开发经验者可以略过
如在安装过程中遇到问题,请在文章下方留言,我在收到留言后会及时答复您

相关文章

网友评论

  • 苏堤拂晓:请问如何及时地更新platform每个os的js?修改ionic的js代码后,再次运行ionic run ios,发现js的代码并没有更新过去。
    云鹏1943:使用ionic prepare 命令试试。

本文标题:Ionic 开发环境搭建(macOS)

本文链接:https://www.haomeiwen.com/subject/dqorjttx.html