cordova + vue 完成一个APP记录 （1）

因本人公司想要开发android APP，又没有android开发，自己只能硬着头皮上了，查看了一些文档，最后定型cordova+vue，讲一下自己的开发之旅。

1.简单的创建项目 android
创建cordova项目  cordova create [项目名]
添加android开发平台  cordova platform add android
打包安装到安卓手机  cordova run android
直接打包apk cordova build android
这时候打包的apk也是可以跑得 打包出来的apk在   [项目名]/platforms/android/app/build/outputs/apk/debug/app-debug.apk目录

2.vue项目
。。。原vue-cli3.0一套流程

3.在vue中使用cordova及其插件
（1）首先要在vue中安装cordova包    yarn add vue-cordova
（2）main.js 引入vue-cordova
    import VueCordova from 'vue-cordova'
    Vue.use(VueCordova)
    
    // add cordova.js only if serving the app through file://
    if (window.location.protocol === 'file:' || window.location.port === '3000') {
      var cordovaScript = document.createElement('script')
      cordovaScript.setAttribute('type', 'text/javascript')
      cordovaScript.setAttribute('src', 'cordova.js')
      document.body.appendChild(cordovaScript)
    }
    
    讲一个例子 在vue中使用cordova调用手机功能
    在cordova-app项目中添加插件 就是第一步创建的安卓项目
        cordova plugin add cordova-plugin-camera
    这时依赖就安装好了，接下来在vue中使用
        //应该在HTML中注册deviceready的事件监听，在它的CallBack函数中再去使用Cordova的功能
        Vue.cordova.on('deviceready', () => {
          console.log('Vue.cordova :', Vue.cordova)
        });
        //注意：deviceready事件是在每回读入HTML的时候都会被调用，而不只是应用启动时调用
        //在组件中使用cordova camera插件调起手机摄像头
        Vue.cordova.camera.getPicture(cameraSuccess, cameraError, cameraOptions)
        
（3）打包配置
    打包配置
    vue.config.js
    module.exports = {
        //基本路径
        publicPath:'./',
        //输出文件目录
        outputDir:'../安卓项目名/www',//能找到就行
        productionSourceMap:false,//不生成map
    }
    注意，注意，注意 vue项目路由最好不要用history模式，会产生打包文件引用路径问题

哈哈哈，到这第一步就完成了，简单APP就可以在手机上跑起来