cordova项目嵌套vue-cli，并调用原生android方法，vue+cordova

cordova项目嵌套vue-cli，并调用原生android方法，vue+cordova

1.创建cordova（略）

这是创建好的cordova项目目录(图1)

我创建了一个名字叫hello的项目，www文件夹是cordova项目的入口，可以发现www文件夹下面有css,image,js三个文件夹和一个index.html页面（图2）

2.在你的cordova目录下创建一个vue-cli项目

vue目录如下图（图3）

注意这是我打包过的vue-cli，所以多出一个dist文件夹
我在cordova项目下创建了一个叫MyApp的项目如图（4）

3.找到vue项目目录下config/index.js 并且修改如图（图5）

修改之后我们打包vue项目则不会生成dist文件夹，而是直接把dist文件夹里面的内容生成到cordova项目目录的www文件夹里
修改之后打包，查看cordova项目www目录，出现如图说明设置成功（图6）

4.打开vue目录index.html页面

引用cordova.js如图（图7）

注意此处路径在vs中是显示找不到的，项目打包后会正常引用

5.使用

首先打包vue项目，确认项目打包后的文件在cordova项目的www文件夹中，然后打包cordova项目，akp安装到模拟器上运行

 //当前网络连接状态    
 networkInfo() {      
 var networkState = navigator.connection.type;     
  var states = {}; 
      states[Connection.UNKNOWN] = "Unknown connection";  
          states[Connection.ETHERNET] = "Ethernet connection"; 
               states[Connection.WIFI] = "WiFi connection";      
               states[Connection.CELL_2G] = "Cell 2G connection";      states
               [Connection.CELL_3G] = "Cell 3G connection";      
               states[Connection.CELL_4G] = "Cell 4G connection";      states
               Connection.CELL] = "Cell generic connection";      
               states[Connection.NONE] = "No network connection";
               
      alert("Connection type: " + states[networkState]);    }

此方法是查看当前设备网络状态，需要先添加对应的Cordova插件，效果实现（图8）
本文结束，欢迎留言，后续更新cordova项目如何在谷歌浏览器上调试（手机运行app，浏览器调试）