vue+Cordova

vue-cordova

vue2.0系列+Cordova

安装vue-cli

npm install -g vue-cli

安装Cordova

npm install -g cordova 

搭建Cordova工程

cordova create myapp*

*注：自定义命名

工程加入vue

cd myapp*
vue init webpack myapp*

*注：自定义命名

注意事项：

修改config目录下的index.js,执行npm run build时，webpack会把打包内容指定到www文件夹内，Cordova根据www文件夹内容构建app。

添加平台：
在加平台前，需要修改config.xml的内容，包名的命名一般是××.××.com，与申请微信时所用的包名对应。

之后运行命令：

cordova platform add android

(cordova platform rm android可以删除platform内的android文件夹)

添加插件，如相机等：

cordova plugin add cordova-plugin-camera

*Cordova插件都不能在PC端使用

代码编写：

在src文件夹内编写工程代码，components文件夹存放.vue文件，组件化方式调用
本工程使用了vue-router处理单页面路由跳转，使用VueCookies监听服务端提供的token

npm install vue-router –save-dev
npm install vue-cookies –save-dev

*VueCookies的使用主要在登录时，与服务端约定token的有效时间是7天，使用VueCookies设置token期限，与路由守卫搭配使用，在token过期或退出登录时强制用户重新登录

this.$cookies.set('status', 'logined', 24 * 60 * 60 * 5)

工程需要的依赖包参考package.json文件

"devDependencies": {
    "antd": "^3.15.1",
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-import": "^1.11.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },

打包apk:

将vue工程构建加入到www文件夹运行命令：

npm run build

debug包直接运行：

cordova build android

release包需要先获得安卓签名：
运行命令生成apk签字,
*自定义命名

keytool -genkey -v -keystore C:\**\**\**\**\myapp\sande.keystore -alias -keyalg RSA -validity 20000

在工程根目录下创建build.json文件，根据apk签字生成过程写入：

{
  "android": {
    "release": {
      "keystore": "sande.keystore",
      "alias": "sande",
      "storePassword": "****",
      "password": "****"
    }
  }
}

sande.keystore文件存在工程根录下

在android工程目录内建release-signing.properties文件，写入：

// This file is automatically generated.
// Do not modify this file -- YOUR CHANGES WILL BE ERASED!

key.store=C:\\**\\**\\**\\**\\myapp\\sande.keystore
key.alias=sande
key.store.password=**
key.alias.password=***

第一行就是sande.keystore文件存放的位置
之后运行命令：

cordova build android –release

得到签字后的apk
安卓9网络问题：
安卓9即使加入网络白名单依然会有不能发出请求的问题，需要修改AndroidManifest.xml文件，加入networkSecurityConfig

<application android:hardwareAccelerated="true" android:networkSecurityConfig="@xml/network_security_config" android:supportsRtl="true">

并在xml文件夹内新建network_security_config.xml文件

写入：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <base-config cleartextTrafficPermitted="true" />
</network-security-config>

开发过程遇到问题，一起交流~

GitHub地址：https://github.com/yazimei/vu...