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构建成功了

 

　　可能出现的问题：

 

　　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控制手机硬件的功能。