环境准备

1. node 8+
2. cordova sudo npm i cordova -g
3. webpack sudo npm i webpack -g
4. vue-cli2 sudo npm i vue-cli -g
5. jdk-1.8
6. android sdk & xcode

创建一个cordova手脚架

$ cordova create test com.test.cn HelloWorld$ cd test$ cordova platform add android$ cordova platform add ios复制代码

在corodva项目下创建一个vue项目

$ vue init webpack src -yes$ cd src$ npm install复制代码

执行完上面命令，项目结构如下：

安装配置vue-cordova

1. 进入src文件夹

$ npm i vue-cordova -s 复制代码

2. vue的main.js引入vue-cordova

//导入vue-cordovaimport VueCordova from 'vue-cordova'Vue.use(VueCordova)复制代码

3. 修改config/index.js的build选项

build: {    // Template for index.html    index: path.resolve(__dirname, '../../www/index.html'),    // Paths    assetsRoot: path.resolve(__dirname, '../../www'),    assetsSubDirectory: '',    assetsPublicPath: './',    //这里很重要，如果是true,打包后app会白屏    productionSourceMap: false,    // https://webpack.js.org/configuration/devtool/#production    devtool: '#source-map',    productionGzip: false,    productionGzipExtensions: ['js', 'css'],    bundleAnalyzerReport: process.env.npm_config_report  }复制代码

4. index.html 加入cordova.js

复制代码

vue里调用cordova插件,这里调用camera

1. 安装cordova 插件

cordova plugin add cordova-plugin-camera复制代码

2. 在需要调取相机的地方，加入相关的代码

cameraTakePicture: function (mySourceType) {    navigator.camera.getPicture(this.onSuccess, this.onFail, {        quality: 50,        destinationType: Camera.DestinationType.DATA_URL,        encodingType: Camera.EncodingType.JPEG,        sourceType: mySourceType    }) },复制代码

参数说明： sourceType

PHOTOLIBRARY 或 0 打开照片库。CAMERA 或 1 打开本机相机。SAVEDPHOTOALBUM 或 2 打开已保存的相册。复制代码

destinationType

DATA_URL 或 0 返回base64编码字符串。FILE_URI 或 1 返回图片文件URI。NATIVE_URI 或 2 返回图片本机URI。复制代码

3. 在上步完成图片拍摄之后，图片上传

dataURLtoFile: function (dataurl, filename) {    var arr = dataurl.split(',')    var mime = arr[0].match(/:(.*?);/)[1]    var bstr = window.atob(arr[1])    var n = bstr.length    var u8arr = new Uint8Array(n)    while (n--) {      u8arr[n] = bstr.charCodeAt(n)    }    var blob = new Blob([u8arr], {
   type: mime})    blob.lastModifiedDate = new Date()    blob.name = filename    return blob}复制代码

调用：

var file = this.dataURLtoFile('data:image/jpeg;base64,' + imageURI, 'test.jpeg')复制代码

打包apk，安装到手机上进行测试

如果jdk和android sdk已经配置好，直接运行一下命令就可以打包

cordova build android复制代码

打包ios

进入platform/ios 使用xcode打开文件Test.xcodeproj 然后按xcode得打包方式打包即可

（xcode打包未完待续。。。）