vue+cordova构建跨平台应用集成并使用Cordova plugin

安装

//安装 vue-cil
npm install --global vue-cli

//安装cordova 
npm i cordova -g

cordova 新建项目

//新建cordova 项目
cordova create vue-cordova
//进入目录
cd vue-cordova
//vue-cli新建vue项目
vue init webpack vueprojectname
//进入vue 项目目录
cd vueprojectname
//安装依赖
npm i

运行项目

npm run dev

编译项目

npm run build

修改编译输出

打开vue项目目录下面的index.html，添加

<script src="cordova.js"></script>

打开/config/index.js

编译打包

先删除 cordova项目下的www文件夹里的东西

执行编译vue项目将输出到 cordova 项目目录下的www文件内

npm run build

 添加android平台并打包

//添加android 平台
cordova platform add android

//打包android apk
cordova build android 

添加ios平台打包

//添加ios平台
cordova platform add ios

打开platform/ios/***.xcodeproj以xcode打开，签名后打包。

效果图

集成并使用cordova plugin 

在cordova-vue/vue/下新建文件夹cordova

再cordova下新建cordova.js

const pluginslist = [
  'cordova-plugin-camera',
  'cordova-plugin-device',
]

exports.install = (vue, options) => {

  vue.cordova = vue.cordova || {
    deviceready: false,
    plugins: []
  }

  vue.cordova.on = (eventname, cb) => {
    document.addeventlistener(eventname, cb, false)
  }

  document.addeventlistener('deviceready', () => {
    vue.cordova.deviceready = true
  }, false)

  pluginslist.foreach(pluginname => {
    let plugin = require('./plugins/' + pluginname)
    plugin.install(vue, options, pluginloaded => {
      if (pluginloaded) {
        vue.cordova.plugins.push(pluginname)
      }
      if (vue.config.debug) {
        console.log('[vuecordova]', pluginname, '→', pluginloaded ? 'loaded' : 'not loaded')
      }
    })
  })

}

在main.js 添加

  import cordova from './cordova/cordova.js'
  vue.use(cordova)

新建文件夹plugins下新建文件

cordova-plugin-camera.js

exports.install = function (vue, options, cb) {
  document.addeventlistener('deviceready', () => {

    if (typeof navigator.camera === 'undefined') {
      return cb(false)
    }

    vue.cordova.camera = navigator.camera

    return cb(true)

  }, false)
}

cordova-plugin-device.js

exports.install = function (vue, options, cb) {
  document.addeventlistener('deviceready', () => {

    if (typeof device === 'undefined' || typeof device.cordova === 'undefined') {
      return cb(false)
    }

    vue.cordova.device = {
      cordova: null,
      model: null,
      platform: null,
      uuid: null,
      version: null,
      manufacturer: null,
      isvirtual: null,
      serial: null
    }

    object.keys(vue.cordova.device).foreach(key => {
      if (typeof device[key] !== 'undefined') {
        vue.cordova.device[key] = device[key]
      }
    })

    return cb(true)

  }, false)
}

同时要在cordova项目目录下 安装cordova-plugin-device，和cordova-plugin-camera插件

cordova plugin add cordova-plugin-device

cordova plugin add cordova-plugin-camera

如此类推，如果你需要别的插件也是这样添加。

整体项目结构