window下Ionic環境安裝


說明:本文說明了在windows平台下安裝Ionic-android開發環境的安裝過程。

 1. 首先要安裝node環境,Ionic的安裝和后續的許多前端工具的安裝都依賴於node的包管理器npm

     nodeJs環境的安裝很簡單,去官網下載最新版的NodeJs直接安裝即可。      Node官網:    https://nodejs.org/

     百度雲地址:http://pan.baidu.com/s/1jGAEQVW

     node環境變量在安裝過程中會自動配置,安裝完成后在cmd中輸入 npm -v 回車。如果出現版本號說明安裝成功。

     node安裝參考:http://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html

 2. 安裝jdk並且配置環境變量,如果已經安裝了jdk則跳過這步。

     jdk下載地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html

     安裝完成以后配置環境變量:

     JAVA_HOME:

   JDK的安裝路徑,這個環境變量本身不存在,需要創建,創建完則可以利用%JAVA_HOME%作為統一引用路徑,其值為:jdk在你電腦上的安裝路徑。

      PATH:

      PATH屬性已存在,可直接編輯。作用是用於配置路徑,簡化命令的輸入,其值為:%JAVA_HOME%\bin。  

     CLASSPATH:

   用於編譯時JAVA類的路徑,注意這里設置的是兩個值,(.;)表示的是JVM先搜索當前目錄。其值為:.;%JAVA_HOME%\lib\tools.jar。

      配置完畢后,通過cmd運行以下命令:java -version,javac 如果出現返回信息,則設置成功。

    

 3. 安裝Android SDK

     下載地址: http://developer.android.com/sdk/index.html  這個地址被牆了。需要翻牆使用。

     百度雲地址: http://pan.baidu.com/s/1sj7cL8T

     這里可以只下載Android SDK 不需要一並下載 Android Studio。下載完成並安裝然后向系統Path環境變量中添加兩個值。分別是 Android SDK中tools目錄的路徑和platform-tools的路徑。例如:

                C:\Program Files (x86)\Android\android-sdk\tools;

                C:\Program Files (x86)\Android\android-sdk\platform-tools;

     如果發現Android SDK安裝目錄中並沒有 “ platform-tools”這個文件夾,應該運行tools目錄下的android.bat文件,然后出現如下界面,勾選Android SDK Platform-tools 然后安裝。

      

      環境變量配置完成以后在cmd中輸入 android並且回車。如果出現android sdk manager則說明安裝成功。

 

4. 安裝 Apache  ant.

    ant下載地址: http://ant.apache.org/bindownload.cgi

    百度雲地址:http://pan.baidu.com/s/1eQxpN8m

    環境變量

    Windows下ANT用到的環境變量主要有2個: ANT_HOME 和 PATH。 
    eg:
    1. 設置ANT_HOME指向ant的安裝目錄。 
    設置方法:ANT_HOME = D:\apache_ant_1.7.0 

    2. 設置bin和lib目錄到PATH變量中。將%ANT_HOME%\bin; %ANT_HOME%\lib添加到環境變量的path中。 
   設置方法:PATH = %ANT_HOME%\bin; %ANT_HOME%\lib 

    %ANT_HOME%可以用真實的路徑代替。

    安裝完成以后在cmd中輸入 ant -version 驗證是否安裝成功。

 

4-A: cordova 5.0以后。使用gradle代替ant構建。

  所以需要安裝gradle.並且配置環境變量。

  

5. 安裝ionic和demo項目下載。

    

 1.使用npm下載ionic

npm install -g ionic

2.選擇一個ionic模板項目下載到本地。中間會有一些問詢,比如是否使用sass.app的命名等。

md myApp

cd myApp //創建一個文件夾並且進入。

ionic start myApp tabs

3.給項目添加android平台。

ionic platform android

這一步可能會出現錯誤,提示執行cordova指令,這是因為沒有安裝cordova.使用npm install -g cordova 安裝cordova之后再次執行步驟3即可

4.在模擬器中運行項目

ionic emulate android

說明: 運行emulate/run命令的時候會在platforms目錄下生成apk.

在執行platform和emulate命令的過程中如果出現報錯大多是因為android環境沒有安裝完全導致的。請在cmd中輸入android打開android SDK manager檢查相關的包是否已經安裝完全。

一般來說,tool和emulator都是必須要安裝的.然后選擇某一版本的android API進行安裝。

 

    參考:

    

  

 

 6. 經過上述步驟我們實際上已經安裝成功了ionic的開發環境。我們也可以使用yeoman來構建別人搭建好的ionic項目框架。

     

1. 安裝yeoman

npm install -g yo

2. 安裝gulp和bower
   npm install --global gulp  //全局安裝, 安裝CLI

npm install --save-dev gulp //cmd進入項目文件位置后安裝。

安裝git. 在官網下載git for window並下載安裝:http://git-scm.com/download/win

或者在百度雲下載:http://pan.baidu.com/s/1i33VoJ7

配置git環境變量

假如你的git安裝目錄是"C:\Camnpr\Program Files (x86)\Git",在path中加入git的bin和cmd目錄,如C:\Camnpr\Program Files (x86)\Git\bin;C:\Camnpr\Program Files (x86)\Git\cmd
   npm install -g bower //不安裝bower的話,ionic-gulp生成器不能生成bower目錄

3. 安裝yeoman ionic-gulp生成器

npm install -g -generator-ionic-gulp

4. 進入項目文件夾,運行生成器
   yo ionic-gulp

或者直接yo,然后安裝提示一步一步運行生成器也可以。 如果執行了步驟3以后,運行yo,在run a generator的選項中找不到 ionic-gulp生成器。那就在項目目錄里面局部安裝生成器
   npm install  -generator-ionic-gulp

5. 安裝完畢以后在cmd中輸入
gulp

即可以啟動gulpfile.js中定義的缺省任務。

--將js文件壓縮混淆合並,在index.html中注入引用,在瀏覽器中啟動項目,並且打開watch任務監聽文件變化。

6. 如果想安裝其他類庫或者框架,使用bower進行安裝。 安裝方式類似於npm。

 

   7. ionic-gulp生成的項目目錄說明:

      

     .tmp:gulpfile.js中build參數為false的時候,運行gulp缺省任務會把app文件夾下的資源合並混淆並創建在.tmp目錄中。

     app:開發目錄。

     

              相關引用只在index.html入口文件中聲明一次。templates中存放html片段。

     bower_componets:使用bower安裝的包目錄。

     node_modules:使用npm安裝的包目錄。

     platforms:Cordova相關的目錄,里面包含每次運行gulp或者ionic命令進行打包形成的apk.

     www: gulpfile.js文件中build中參數為true的時候,app文件夾下資源會合並混淆創建www目錄。也就是壓縮打包形成apk的文件目錄。

     vendor.json: 聲明應該引入的外部資源的鏈接。

     在app/index.html中對應:

     

     gulpfile.js: 定義gulp任務

  

       

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM