第一次使用 Cordova + Vue 開發 APP，順便將安裝開發環境的步驟紀錄下來。

安裝

• Vue Cli
• Cordova
• JDK (Android)
• Android Stidio (Android)

安裝 Vue Cli

使用下列命令安裝：

$ npm install -g @vue/cli

安裝 Cordova

使用下列命令安裝：

$ npm install -g cordova

安裝 JDK (Android)

下載 JDK 8並安裝 (要註冊&登入 Oracle 帳號才可下載)。

安裝完成後，將以下路徑(替換為實際安裝路徑)加入 PATH 環境變數：

• C:\Program Files\Java\jdk1.8.0_212\bin
• C:\Program Files\Java\jre1.8.0_212\bin

以及設定 JAVA_HOME 環境變數為 C:\Program Files\Java\jdk1.8.0_212 (替換為 JDK 實際安裝路徑)。

安裝 Android Stidio (Android)

下載 Android Stidio並安裝。

安裝完成後，將以下路徑(替換為實際安裝路徑)加入 PATH 環境變數：

• C:\Users\[User]\AppData\Local\Android\Sdk\tools
• C:\Users\[User]\AppData\Local\Android\Sdk\tools\bin
• C:\Users\[User]\AppData\Local\Android\Sdk\platform-tools

以及設定 ANDROID_HOME 環境變數為 C:\Users\Yang\AppData\Local\Android\Sdk (替換為 Android SDK 實際安裝路徑)。

新增虛擬設備 (Android)

1. 開啟 Android Stidio，第一次啟動會需要一點時間初始化。
2. 點擊右下角 Configure > AVD Manager 開啟虛擬設備列表 (Your Virtual Devices)。
3. 點擊左下角 + Create Virtual Device... 新增虛擬設備 (Create Virtual Device)。
4. 選擇虛擬設備類型 (Select Hardware)，選擇完後點右下角 Next。
5. 選擇 System Image，選擇前須先下載 Image，選擇完後點右下角 Next。
6. 設定虛擬設備 (Android Virtual Device (AVD))，設定完成後點右下角 Finish。
7. 新增完成。

新建 Vue + Cordova 專案

建立一個新的 Vue 專案：

$ vue create vue-cordova

安裝 vue-cli-plugin-cordova 套件：

$ vue add cordova

vue-cli-plugin-cordova 可用指令：

$ npm run cordova-serve-android # 開發 Android APP
$ npm run cordova-build-android # 編譯 Android APP
$ npm run cordova-serve-ios # 開發 IOS APP
$ npm run cordova-build-ios # 編譯 IOS APP
$ npm run cordova-serve-browser # 開發 瀏覽器 APP
$ npm run cordova-build-browser # 編譯瀏覽器 APP
$ npm run cordova-prepare # prepare for build

參考資料

• 安装 | Vue CLI
• Cordova
• Android Platform Guide - Apache Cordova
• Create and manage virtual devices | Android Developers