使用Cordova + VUE开发电商App实录(VUE与Cordova的整合)

vue2.0

初始化VUE项目

VueJS最近异常喜爱,有点好处我也不多说了,就是爱,就是爱。

VueJS也有自己的命令行工具vue-cli安装方如下:

$ npm install -g vue-cli

$ vue init webpack my-project  //使用webpack模板初始化项目,每一步都有提示,很像之前bower构建项目的流程

更多资料请参考:vue-cli GitHub

使用 vue-cli 构建项目很方便,webpack的各种配置也都会写好,不需要自己再编辑了。如果需要使用vuex,vue-router等工具,需要自己添加,相应的网站都有详细的介绍,这里就不赘述了,贴出链接。

vuejs文档vue-router文档vuex文档Mint-ui

项目打包配置

可以把vue项目放到cordova项目的根目录下面,这样比较方便,可以将打包好的项目直接输出到cordova项目的www目录里。

修改vue项目config目录下的index.js文件的build属性如下:

index: path.resolve(__dirname,'../../www/index.html'),

assetsRoot: path.resolve(__dirname,'../../www'),

assetsSubDirectory:'static',

assetsPublicPath:"",  //原来的值是“/”,需要修改为“”

修改好之后,执行:npm run build,项目就会构建、打包、压缩输入到我们定义的www目录下边。

此时来到cordova的根目录,执行:cordova build android 命令,就可以打包出新的apk了。

打包时要注意,由于每次cordova都会输出相同名字的apk,需要把原来的apk删除,或者更换一个名字,不然会导致apk的体积比较大(具体原因我还没有找到,不过可以先这样解决)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 来源:github.com Vue.js开源项目速查表:https://www.ctolib.com/cheats...
    zhangtaiwei阅读 14,033评论 1 159
  • UI组件element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于...
    董董董董董董董董董大笨蛋阅读 12,779评论 6 123
  • 今早上忽然想到,自己的愿望说好听了是浪漫,其实是任性妄为,随心所欲。当年选大学,一二志愿六个学校清一色全是海边,是...
    爱源阅读 1,387评论 0 0
  • 叹飘零,墨香千古。掬来一弯流岚,借得一缕飞烟,纤手轻碾一砚墨香,为心绪铺展一纸素笺。
    bdf25fb9aa2c阅读 2,744评论 0 0
  • 昨天接到快递,说是有包裹,已经放在楼下保安师傅那里了。 我嘀咕着,小丫头又买啥了?走去一看,又是一个大大的纸箱!这...
    天使小鱼儿阅读 1,706评论 3 3

友情链接更多精彩内容