vue-cli3 + cordova搭建app

用vue + cordova 做app的思路就是用vue做一个移动端网站，然后用cordova给套上apk的壳。需要解决的问题是，在vue中怎么解决cordova的调用问题。

项目目录是这样的：

1、新建项目

新建testAPP目录

1.1 、在testAPP下创建cordova项目：

cordova create cordova-app

添加Android平台

cd cordova-app
cordova platform add android

打包app安装到手机上（前提是手机连上电脑并开启use调试模式）

cordova run android

如果直接单纯的打包apk再自己拷贝到手机上安装也行：

cordova build android

打包出来的apk在cordova-app/platforms/android/app/build/outputs/apk/debug/app-debug.apk目录

默认生成的cordova app 项目打开长这样：

1.2 在testAPP下创建vue项目：(按照vue cli 官网创建即可，我用的是最新的@vue/cli 3.x )

如果没有vue cli 的话先全局安装一下

npm install -g @vue/cli-service-global

创建vue项目

vue create hello-world

创建的时候会有一些自定义选项，建议根据自己的项目需要来选择安装

询问是否使用history路由模式？（有hash和history 2种模式）
如果使用history模式的话，路由上就没有#号，好看点，但是需要后端配合
具体说明查看官方文档HTML5 History 模式

我这里输入n ,毕竟套在app里路由也看不到

运行vue项目

cd vue-app3
npm run serve

在浏览器打开 http://localhost:8082/ 即可看到效果：（我运行了几个项目所以端口不是8080了）

2 、配置vue.config.js，用cordova 把vue 项目打包成app安装到手机上

@vue/cli 3.x 生成的项目，目录十分简洁，连配置文件都不见了。如果需要配置，需要在根目录手动添加vue.config.js 。具体查看vue cli 官方文档CLI 配置

我们可以在vue.config.js 配置npm run build 打包生成的文件直接放到/cordova-app/www目录下，这样就不需要我们手动拷贝了。只需要在cordova-app 直接打包app即可。

vue.config.js ：

module.exports = {
    //基本路径
	publicPath: './',
	//输出文件目录
    outputDir: '../cordova-app/www',
    productionSourceMap:false, //不生成map
}

配置到之后，我们尝试在vue-app3 下打包

npm run build 

再在cordova-app项目中打包app安装到手机上

cordova run android 

这时候app上的内容就变成了vue项目的内容了,大功告成

3、在vue项目里使用cordova

我是用的插件vue-cordova

GitHub上也有具体的说明

npm install --save vue-cordova

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.on('deviceready', () => {
  console.log('Cordova : device is ready !');
  console.log('Vue.cordova :', Vue.cordova);
});

这样子就可以在vue-app3 项目中使用cordova 插件了，比如我们要用摄像头的功能

切换到cordova-app 项目，添加插件

	cordova plugin add cordova-plugin-camera

然后打包apk安装到手机上。

上面我已经在vue-app3 项目的main.js 中打印了console.log('Vue.cordova :', Vue.cordova);

这里我直接用Chrome浏览器inspect 查看控制台的打印信息。

注：手机连上电脑，允许usb调试模式，得

控制台已经把信息打印出来了

如何使用camera插件 ?

Vue.cordova.camera.getPicture(cameraSuccess, cameraError, cameraOptions);

其他cordova插件也是大同小异的，都是这样调用。当然也有一些例外，比如说我下篇文章的第三方登录，就不是这样调用。