iT邦幫忙

0

Vue Cli 3 + vue-cli-plugin-cordova 安裝環境

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

安裝

安裝 Vue Cli

使用下列命令安裝:

$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

安裝 Cordova

使用下列命令安裝:

$ npm install -g cordova
# OR
$ yarn global add 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

參考資料


尚未有邦友留言

立即登入留言