本文出自 我的 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 入門開發者,有開發經驗者可以略過
如在安裝過程中遇到問題,請在文章下方留言,我在收到留言后會及時答復您