使用Vue来开发Cordova的前端

先看下整体的项目结构：

1. cordova项目的创建

这个首先需要cordova的环境，然后使用命令来创建项目。
1.安装cordova:

 npm install -g cordova

2.创建项目

cordova create 项目名称

3.添加平台

$ cd 项目名称

$ cordova platform add android

4. 运行项目

cordova run Android

2.Vue项目的创建

为了方便后续开发，最好把Vue项目创建到Cordova项目的目录下边。

1. 安装vue cli

npm install -g @vue/cli

2. 创建项目

vue create 项目名称

3. 运行项目

npm run dev

3. Vue和cordova的整合

1. 把cordova项目中的index.html中的cordova.js的引用复制到Vue项目的index.html

   
   
   

2. 修改Vue项目的配置，使其build的文件定位到cordova项目中的前端页面位置
   修改Vue项目的config目录下的index.js文件

   
   

到此为止，vue和cordova已经整合一起。

4.使用方式

1. 打包vue项目

npm run build

2.运行cordova项目

cordova run Android

稍微复杂一点的是使用cordova的插件

5. 添加插件

在cordova项目下，使用命令：

cordova plugin add 插件名称

6.在Vue中使用插件

1. 首先需要修改Vue项目的main.js, 在document加载完成之后再去new Vue.

   
   
2. 把所有的插件方法封装到js文件中，就可以在Vue项目中引用了。