Cordova+Vue实现Android APP开发

Cordova是一个由HTML、CSS和JavaScript构建的混合移动App平台。本教程的目的是将Vue项目集成到Cordova中。

开发环境和工具

操作系统：Windows 10 Pro，1709

node.js:v8.11.2（）

Java环境：

1.下载并安装JDK

()

2.设置JAVA_HOME环境变量，指定为JDK安装路径（百度）

Android环境：

1.下载并安装Android SDK（）

2.安装必要的API。我的安装如下：

App编程接口。已安装png

3.配置ANDROID_HOME环境变量，指定为ANDROID SDK安装路径。（自有百度）

工具

1.VS代码

2.Android Studio（可选）

3.Genymotion模拟器

准备好上述开发环境和工具后，就可以进行开发了。环境建设可能存在各种问题。耐心是成功的一半。

课程

1、 安装cordova框架以生成APP

1.用npm安装cordova

npm安装-g cordova

2.创建cordova项目

科多瓦创建科多瓦vue

此后，科多瓦项目的基本框架已经完成。以下所有操作都需要在cordova vue目录中执行。

3.添加Android平台

cd科多瓦vue

cordova平台添加android--保存

4.检查构建APP的条件

cordova要求

如果满足以下条件，您可以构建一个APP

构建先决条件。天然气

5.构建APP并运行演示

cordova构建android

以下界面显示您的App已成功构建

生成成功。天然气

6.找到APP文件并用Genymotion模拟器打开

APP文件的路径如成功施工的图片所示，具体取决于个人情况

我的名字是：D:cordova vue platforms android app build outputs apk debug app debug.apk

演示APP运行界面.png

如果你完成了以上步骤，恭喜你取得了80%的成功。下一步是将vue项目集成到Cordova项目中。

2、 vue项目被整合到Cordova项目中

1.建立虚拟项目

在cordova vue目录中安装vue项目

脚手架安装（3.0.0）：npm install-g@vue/cli init

创建项目：vue init webpack vue app

运行vue项目：npm Run dev

vue-app.png版本

2.修改配置项并将静态文件打包到cordova项目

此时的项目结构为：

项目结构.png

然后修改索引的生成配置项。js在vueApp文件的config下。

修改如下：

修改配置项.png

修改后，构建以下项目npm run build

3.返回cordova vue项目目录以重建App

cordova构建android

此时构建的App如下所示。

Cordova vueApp.png

至此，基本的cordovaApp框架结构已经建立，然后您可以专注于vue项目的开发。此外，#插件可以结合vue开发，实现安卓文件存储、地理位置、拍照等功能，完成js控制手机硬件的功能。