vue+phonegap(cordova)整合Android开发

0. Vue.js 是当下比较流行的前端框架,其以数据为中心的设计思想为开发者节省不不少DOM操作的时间,其中Vue广泛用于SPA的开发,基于这个特点,笔者想到将Vue和cordova进行整合,来进行Android的开发,由于网上的资源不多,自己利用之前所学简单配置了开发环境,以此分享开发经验,如有不足之处或者读者有跟好的想法,欢迎评论留言,批评指正。
1. 首先配置Android端的cordova环境,大家可以参考之前写的这篇文章:http://blog.csdn.net/wlonging/article/details/51251372
2. Android端环境配置完成之后,我们用Webpack新建一个Vue工程,可以参考这篇文章:http://blog.csdn.net/wlonging/article/details/53414076
3. 引入cordova.js,这里我之前尝试用import、require等等方法进行引入,都已失败告终,最后想到用静态资源引入,在我们vue工程的根目录下新建static文件夹,在里面新建js文件夹,把cordova.js放到这里,目录结构如下图所示:

目录结构

4. 之后在我们的index.html 入口文件将这个cordova.js引入:

引入文件

5. 随后我们run一下,发现这就是我们熟悉的页面,到此cordova+vue环境就配置好了

运行结果

6. 在实际配置的时候,会出现一些问题:
  1. 控制台报错: cordova_plugins.json not found 这个时候,在cordova.js所在目录里面新建这个文件,在index.html里面跟引入js一样引入就好了。

  2. 如何使用cordova?直接在Vue里面使用即可,各个生命周期都可以使用cordova封装的函数。
    ……

7. 如果后面使用会遇到起到问题,将会继续更新这篇博客,避免大家踩坑。
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值