通過npm安裝 Cordova

1. 安裝JDK 選擇安裝目錄 安裝過程中會出現兩次 安裝提示 。第一次是安裝 jdk ，第二次是安裝 jre 。建議兩個都安裝在同一個java資料夾中的不同資料夾中。（不能都安裝在java資料夾的根目錄下，jdk和jre安裝在同一資料夾會出錯）

   如下圖所示

   

2. 1：安裝jdk 隨意選擇目錄 只需把預設安裝目錄 \java 之前的目錄修改即可

   2：安裝jre→更改→ \java 之前目錄和安裝 jdk 目錄相同即可

   注：若無安裝目錄要求，可全預設設定。無需做任何修改，兩次均直接點下一步。

   

   

3. 安裝完JDK後配置環境變數  計算機→屬性→高階系統設定→高階→環境變數

    

    

   

4. 系統變數→新建 JAVA_HOME 變數 。

   變數值填寫jdk的安裝目錄（本人是 E:\Java\jdk1.7.0)

    

    

5. 系統變數→尋找 Path 變數→編輯

   在變數值最後輸入 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

   （注意原來Path的變數值末尾有沒有;號，如果沒有，先輸入；號再輸入上面的程式碼）

   

6. 系統變數→新建 CLASSPATH 變數

   變數值填寫   .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar（注意最前面有一點）

   系統變數配置完畢

   

7. 檢驗是否配置成功 執行cmd 輸入 java -version （java 和 -version 之間有空格）

    

    

   若如圖所示 顯示版本資訊 則說明安裝和配置成功。

   

Gradle環境變數的配置

配置GRADLE_HOME： 注意：一定要重啟系統。

找到Android Studio中gradle的位置

E:\Android_Studio\gradle\gradle-2.10

配置GRADLE_USER_HOME:

找到一個碟符空間比較大的地方來重新放置.gradle檔案

比如我就放在了E:\Android\.gradle

配置path:

在path中加入%GRADLE_HOME%\bin

接著，在命令提示符中檢視path中是否已經新增成功了

 

如果在path中檢視如果成功了，那麼在命令提示符中輸入gradle -v來檢視gradle是否已經配置成功了

如果出現了gradle的版本資訊的話，說明你已經配置成功了

首先請確保你在本地已經安裝了NodeJS（可以呼叫npm命令）, 並且是聯網狀態的。如果不知道如何安裝NodeJS, 請參考 ”四步完成NodeJS安裝，配置和測試”。

第一步: 在命令列(CMD)裡輸入 npm install -g cordova

 

 

第二步：檢測Cordova 的版本號，在命令列輸入 cordova -version

 

 

1. 前言：在進行hybrid app開發時，可以採用vue.js前端框架進行h5頁面開發，然後使用跨平臺cordova工具打包成app，如android或ios等，再h5頁面也可以使用cordova豐富的外掛呼叫原生程式碼，獲取裝置相關資訊、調取手機攝像頭等

 2. 建立cordova專案

   1） 建立cordova專案

    前提：安裝node和cordova，安裝方式很簡單，自行百度就可以了

    cordova create cordovaApp com.test.cordova myApp

    

 

 

   2）建立平臺

    進入cordovaApp目錄

    cordova platform add android 建立android平臺

    或cordova platform add ios 建立ios平臺

    3）cordova打包命令，打包成apk的時候使用

    cordova build android  此時會將cordovaApp/www目錄下的檔案打包成apk檔案，即可安裝到手機

3. 在cordova專案目錄下建立vue 專案

    在當前cordova專案目錄下，使用vue-cli腳手架建立vue專案

    vue init webpack vue-src
   

4. vue專案建立完成後的混合app框架如下，其中vue-src目錄是vue專案，在該目錄下進行前端程式碼開發：

 

 

 

   5. 修改vue配置，完成hybrid app框架搭建

     1) 使vue專案的build輸出路徑指向cordova目錄下的www

    vue-src/config/index.js

    

 

 

    2）vue專案的index.html頁面加入cordova.js

   index.html

   

 

 

6. 打包

    如果需要呼叫原生api，可使用cordova外掛，可百度；

    開發完vue專案後，進入vue專案，執行npm run build 打包vue專案，這樣vue專案的打包後的檔案就會直接放在cordova專案的www目錄下；然後執行cordova build android打包安卓應用（apk），即可安裝執行在手機上；

    

 

 

7. 效果