Ionic 2 + 手動搭建開發環境教程 【轉】

ionic簡介 

爲何選用ionic: 

1. 完全開源且免費
2. 性能優異
3. 基於紅的發紫的AngularJs
4. 漂亮的UI
5. 強大的命令行(基於更熱門的nodejs)
6. 開發團隊很是活躍。
7. ngCordova，將主流的Cordova API或者Cordova插件封裝爲AngularJS擴展，使用很是方便。
8. 開源免費的webfont icon庫ionicons,基本知足你icon需求。

快速搭建綠色 
注意：如今手動安裝的ionic都是2x版本 須要1.x版本請看搭建綠色環境：Ionic_1.x 5分鐘快速搭建綠色開發環境 
開發環境看這裏 

---

相關下載: 

Node.js (npm安裝工具)	百度下載 官網下載  注:若是官網新版不能安裝請用百度下載0.12.7版
jdk (android編譯依賴)	百度下載 官網下載
android (ADK編譯)	百度下載 官網下載 (建議迅雷)

ionic1.x開發工具建議Sublime/WebStorm + ionic助手 
ionic2.x開發工具建議VScode/WebStorm 

---

大體步驟（注意安裝順序）：安裝node.js - 安裝jdk - 安裝android(adk) - 命令安裝ionic - 建立項目 - 編譯項目apk 

注意事項: 
安裝ngCordova.js須要安裝bower(Git和jre)比較麻煩 推薦使用ionic助手，助手會從github下載最新版安裝。 
建議全部程序管理員運行包括cmd androidsdk避免莫名的問題如sdk打不開cmd某些命令不能執行。 

1.安裝node.js 

點 next進行安裝（注意避免中文目錄）

安裝後cmd執行 node -v看到版本即安裝成功（無需設置path）

如今就能夠安裝ionic，可是咱們要編譯apk才能看到效果因此須要裝sdk （這裏注意順序先裝sdk再裝ionic）

2.安裝JDK(androidSDK須要) 

點 next進行安裝（注意避免中文目錄）

安裝後cmd執行 java -version看到版本就是安裝成功了（無需設置path）

3.安裝androidSDK 

點 next進行安裝（注意避免中文目錄）

 

設置環境變量全局訪問android

個人電腦 - 右鍵屬性 - 高級系統設置 - 環境變量 

新建變量名               變量值 
ANDROID_HOME     D:\ionic\androidsdk(你sdk的路徑)

而後在path裏添加(注意前面的分號)   
;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools

執行 android -h看到命令即安裝設置成功

注意:執行androidsdk目錄下的 SDK Manager.exe便可打開工具包  若是遇到打不開的狀況請用管理員運行!!!

配置AndroidSDK 國內沒法訪問google服務器 因此列表是空的須要配置鏡像 
選擇Tools - Options 打開設置界面

填入mirrors.neusoft.edu.cn 端口80

並勾選 「Force  https://... sources to be fetched using  http://...單擊Close關閉」

依次選擇Packages - Reload（或者從新打開）

這裏千萬注意只須要勾選3個Android SDK Platform-tools、 Android SDK Build-tools、 API23下的 SDK Platform (編譯的時候會提示你須要的api版本，目前是API23) 
若是你勾選了其它的，可能要下載二、30G的東西。像我這樣選只須要下載200M

 

附加：項目集成Crosswalk須要勾選Extras下的Android Support Repository和Google Repository不然會報錯 
 

接受 - 安裝

 

安裝完的列表 新版ionic只需裝23,若是編譯遇到錯誤就安裝API 22的platform

 

4.安裝ionic cordova

打開cmd（建議管理員運行）將npm映射到淘寶的服務器 
npm install -g cnpm --registry=https://registry.npm.taobao.org 

而後咱們就能夠用cnpm命令安裝了 
cnpm install -g cordova ionic（安裝 cordova ionic）

 

安裝完成後運行 ionic -v能夠看到版本

5.建立/編譯項目 

1.建立項目

環境搭建完畢，如今開始建立項目編譯APK 
ionic start myApp tabs（建立過程y/n詢問是否打開官網n便可）

 

建立的項目文件夾 
 

如今咱們能夠運行ionic server預覽下項目

2.編譯項目APK

編譯須要先添加platform平臺 
ionic platform add android（添加平臺 ionic platform rm android移除平臺 平臺大概20M遷移項目時候須要刪掉）

 

ionic build android（第一次編譯要下載gradle-2.2.1-all.zip和jar 若是gradle-2.2.1-all.zip下載太慢換個時間段再嘗試）

 

三個模版APK文件百度下載

經常使用命令： 

npm install -g cnpm --registry=https://registry.npm.taobao.org（npm鏡像源指向淘寶） 
cnpm install -g cordova ionic（安裝cordova ionic） 
cnpm update -g cordova ionic（更新cordova ionic） 
ionic -help（查看幫助） 
ionic -v（查看版本） 

ionic start myApp blank（空項目） 
ionic start myApp tabs（帶導航條） 
ionic start myApp sidemenu（帶側滑菜單） 

ionic platform add android（添加android平臺） 
ionic platform remove android（移除android平臺） 
ionic build android（編譯項目apk） 
ionic emulate android（運行項目apk 手機鏈接在手機運行 模擬器鏈接在模擬器運行） 
ionic run android （至關於build + emulate） 
ionic serve（開啓服務調試） 

 

 

以上內容轉自：http://bbs.ionic-china.com/read.php?tid=7&fid=4