使用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辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容