vue和cordova项目整合打包，并实现vue调用android的相机的demo

通过网上查找不少资料，发现不少只有vue+cordova的项目整合，可是vue使用cordova插件的文章不多，如今把从建立cordova和建立vue到vue使用插件到项目打包到android手机运行过程记录下来；

先上项目结构目录

---

cordova项目建立

一、安装cordova环境这个这边就不描述了，网上不少教程
二、建立cordova应用

cordova create app com.demo app

cordova create 建立cordova项目 app为目录 com.demo命名空间 app项目名称

三、添加平台

cd app
cordova platform add android

cd命令进入到项目文件夹里面添加安卓平台，要添加ios就把安卓换成ios就能够了

四、编译安卓app

cordova build android

编译安卓系统，若是成功就表示编译完成
注：若是没编译成功，那么就用检查环境命令去检查

cordova requirements

运行命令后会有提示环境或者其余问题

五、cordova emulate android
在安卓模拟器上运行

cordova serve android

在浏览器上面运行

cordova run android

在安卓手机上面运行，前提是电脑链接了安卓手机而且装好驱动和打开usb调试

到这里cordova项目建立完成

---

vue项目建立

一、vue环境和webpack安装这边就不详述了，网上不少
二、安装好vue后进入到cordova项目里面

vue init webpack vue

最后的‘vue’为项目的名字
三、

四、根据图上面提示的cd 指向vue项目后 npm run dev用开发模式跑起来项目

vue和cordova项目整合

一、把cordova项目的index.html里面的meta标签和cordova.js引用复制到vue项目的index.html

二、修改vue项目里面的配置，直接上图，

到这里修改完成

添加cordova插件

这里以相机为例
一、进入到cordova项目目录，不是vue

cordova plugin add cordova-plugin-camera

添加相机插件

cordova plugin ls

列出全部已安装的cordova插件

参考w3c的文档https://www.w3cschool.cn/cord...

到这里cordova安装的相机插件

重点来了：vue怎么用相机

一、修改vue项目的main.js的写法

添加deviceready事件监听，当cordova设备准备完成后再new vue
二、建立一个js文件，我这边叫cordovaplugin.js

三、修改App.vue文件，增长按钮和事件调用

到这边就完成了，剩下编译和打包
四、进入vue文件夹

npm run build

到这边vue项目编译完成
五、回到cordova项目文件夹，进行打包

cordova run android

运行到安卓手机上，前提是有用手机链接电脑

完成-手机截图