Vue Cli 3 + vue-cli-plugin-cordova 安装环境

第一次使用 Cordova + Vue 开发 APP，顺便将安装开发环境的步骤纪录下来。

安装

Vue CliCordovaJDK (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\binC:\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\toolsC:\Users\[User]\AppData\Local\Android\Sdk\tools\binC:\Users\[User]\AppData\Local\Android\Sdk\platform-tools

以及设定 ANDROID_HOME 环境变数为 C:\Users\Yang\AppData\Local\Android\Sdk (替换为 Android SDK 实际安装路径)。

新增虚拟设备 (Android)

开启 Android Stidio，第一次启动会需要一点时间初始化。点击右下角 Configure > AVD Manager 开启虚拟设备列表 (Your Virtual Devices)。点击左下角 + Create Virtual Device... 新增虚拟设备 (Create Virtual Device)。选择虚拟设备类型 (Select Hardware)，选择完后点右下角 Next。选择 System Image，选择前须先下载 Image，选择完后点右下角 Next。设定虚拟设备 (Android Virtual Device (AVD))，设定完成后点右下角 Finish。新增完成。

新建 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 CLICordovaAndroid Platform Guide - Apache CordovaCreate and manage virtual devices | Android Developers