使用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的体积比较大（具体原因我还没有找到，不过可以先这样解决）。