基于Vue+cordova开发webapp并调用Native功能 实践

安装cordova，安装vue-cli: npm i cordova -g，npm i -g vue-cli。

使用cordova初始化项目并安装android平台:

使用命令行进入开发目录:
执行: cordova create vueapp此命令会生成vueapp目录，vueapp即是完整的cordova项目

进入vueapp目录:
执行:cordova platform add android执行 cordova build android，会将项目默认的示例打包成apk,目录在 vueapp\platforms\android\build\outputs\apk下，直接copy到手机进行安装即可。注:在进行build过程中，会用到sdk相关平台包，按要求进行安装。

使vueapp项目支持相关插件：

在vueapp目录下执行安装插件命令:

cordova plugin add cordova-plugin-geolocation  #支持手机位置获取
cordova plugin add cordova-plugin-camera  #支持手机相机与相册调用
cordova plugin add cordova-plugin-vibration #支持调用手机振动
cordova plugin add phonegap-plugin-barcodescanner #支持手机扫描二维码

创建Vue项目:

在vueapp目录下:
执行 vue init webpack src
此命令会生成src目录，进入src目录:
执行 npm i

修改src下的index.html，加入cordova.js

修改src下config目录下index.js，使其build生成到www目录下,因为cordova生成app时是读取www目录的内容:

将src下默认生成的HelloWord.Vue中的显示内容删除，直接修改App.vue,代码如下:

1. 在src目录下使用npm run build 打包vue项目，所生成的相关文件全部进入www目录下。
2. 再次进入vueapp目录，执行 cordova build android  ,生成相关APK，copy并安装apk。