概要

軟體安裝清單:Node.js,Java JDK，gradle，apache-ant，Android Studio

步驟一：安裝Java SDK

配置環境變數：

JAVA_HOME：C:\Program Files (x86)\Java\jdk1.8.0_91

CLASSPATH：.;%JAVA_HOME%\lib\tools.jar;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\bin;

Path：%JAVA_HOME%\bin;

備註:具體以安裝目錄路徑為準。

使用命令測試是否安裝成功

javac

步驟二：安裝 gradle，apache-ant

移步官網下載指定zip，解壓到指定的路徑，並配置環境變數。

GRADLE_HOME： D:\Android\gradle

Path：%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;%GRADLE_HOME%\bin

ANT_HOME：D:\Android\apache-ant-1.9.7

CLASSPATH：D:\Android\apache-ant-1.9.7\bin (增加)

使用命令測試是否安裝成功

adb

步驟三：Android Studio安裝

安裝完成後配置環境變數，設定Android SDK路徑，具體以實際安裝路徑為準

ANDROID_HOME： C:\Users\JavonHuang\AppData\Local\Android\Sdk

Path：%ANDROID_HOME%\tools；%ANDROID_HOME%\platform-tools；%GRADLE_HOME%\bin；D:\Android\apache-ant-1.9.7\bin

小結：配置總覽

JAVA_HOME：C:\Program Files\Java\jdk1.8.0_191

CLASSPATH：.;%JAVA_HOME%\lib\tools.jar;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\bin;D:\Android\apache-ant-1.9.7\bin

GRADLE_HOME：D:\Android\gradle

ANDROID_HOME：C:\Users\JavonHuang\AppData\Local\Android\Sdk

path:%JAVA_HOME%\bin;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;%GRADLE_HOME%\bin;D:\Android\apache-ant-1.9.7\bin

環境檢查:

1.檢查當前Cordova的開發環境：cordova requirements

步驟四：Cordova建立

1.全域性安裝Cordova：npm install -g cordova 

2.建立一個Cordova專案：cordova create helloworld javon.huang.helloworld HelloWorld

helloworld:專案資料夾名

avon.huang.helloworld:專案包名

Helloworld:專案名

3.進入專案資料夾cd helloworld,新增編譯平臺

安卓:cordova platform add android

IOS:cordova platform add ios

3.外部網路設定，新增白名單外掛：cordova plugin add cordova-plugin-whitelist

步驟五：編譯Cordova專案

1.全域性編譯：cordova build

2.安卓編譯：cordova build android

3：IOS編譯：cordova build ios

步驟六：Vscode外掛Cordova Tools（直接除錯時使用）

用於模擬開發介面。

小結：

1.至此Cordova的開發環境配置完成，在沒有錯誤的情況下可以生成apk檔案。

2.下一步即整合Vue專案

步驟七：整合Vue專案

1.構建Vue專案：vue init webpack

2.引入minit-ui：npm install mint-ui

3.引入axios: npm install axios

4.修改index.js

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App'
import router from './router'
import axios from 'axios'

Vue.use(MintUI)
Vue.config.productionTip = false
Vue.prototype.$axios=axios
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

5.修改webpack.base.conf.js，新增載入資源路徑

{
   test: /\.css$/,
   include: [
   /src/,
   '/node_modules/mint-ui/lib/',  //增加此項匯入其樣式
    ],
    loader: "style!css"
 }

6.修改index.js將打包後的資源釋出到Cordova編譯路徑www資料夾

    index: path.resolve(__dirname,'../www/index.html'),

    assetsRoot: path.resolve(__dirname,'../www'),

    assetsSubDirectory:'',

7.Vue專案啟動:

1.編譯：npm run build

2.啟動：npm run dev

小結:支援整個開發環境搭建完畢，我們可以直接在同一個專案利用vue開發單頁應用，在使用cordova進行apk打包。