Cordova+Vue实现Android APP开发
Cordova是用法HTML,CSS，JavaScript构建的混合移动应用程序的平台。此篇教程的目的是将Vue项目融合到Cordova，正文开头。

操作系统：Windows 10 Pro,1709

node.js：v8.11.2 （

Java环境：

1.下载安装JDK

2.设置JAVA_HOME环境变量

新建系统变量JAVA_HOME，变量值为JDK根名目


Path=%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

安卓环境：

1.下载安装Android SDK

2.配置ANDROID_HOME环境变量

新建系统变量ANDROID_HOME，变量值为SDK根名目

Path=%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

工具

1.VS code

2.Android Studio（可选）

3.模拟器

当预备好上述的开发环境和工具之后，你就可以开发了。可能环境搭建会浮现各种问题，耐烦解决了就胜利一半了。

一、安装cordova框架生成APP

1.用npm安装cordova

2.创建cordova项目

自此，cordova项目的基本骨架完成了，下面的全部操作都需要在cordova-vue名目下举行。

3.添加android平台

4.检查构建APP的条件

若满足下面的条件，解释你可以构建APP了

可能浮现的问题：

Android SDK：not installed

可能是sdk没安装好或者是环境变量没有配置对Android target：not installed

可能是Android SDK版本没装对，按照提醒的版本再安装一次Gradle:not installed

解决办法：到下载Gradle（解压后举行环境配置

新建GRADLE_HOME，地址为Gradle的根名目

Path=%GRADLE_HOME%\bin

5.构建APP，并运行demo

浮现如下的界面表示你的app构建胜利了

手机上可以打html与css的app可能浮现的问题：

Failed to apply plugin [id ‘com.android.internal.application’]


解决办法：在gradle.properties文件中添加android.overridePathCheck=true就可以了

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

APP文件的路径如构建胜利的所示，按照个人状况而定，我的为：

用模拟器打开的界面：

假如你以上步骤都完成了，恭喜你已经胜利了80%，接下来的步骤就是将vue项目整合到Cordova项目里面。

二、vue项目整合到Cordova项目里面

1.构建vue项目


在cordova-vue名目下安装vue项目

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

创建项目：vue init webpack vue-app

2.修改配置项

vue-app文件夹中config下的index.js的build配置项。

vue-app文件夹中的index.html页面加入cordova.js

3.打包

在vue-app项目文件夹下：

在cordova项目文件夹下：

此时构建的APP就如下所示了。

到这里基本的cordova-app框架结构就搭建好了，然后就可以专注于vue项目的开发了。另外， vue-cordova这个插件可以结合vue举行开发，实现安卓的文件存储，地理定位，照相等功能，完成js控制手机硬件的功能。

     

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。