公司为了节约开发时间,要用Cordova+Vue做项目;所以最近一直在研究Android混开。自己第一次做混开，也是厚着脸皮向前端请教了很多问题，才马马虎虎搞出来点东西。下面把最基础的项目创建记录一下。
安装 Npm
这里就不给出具体安装了，可以百度一下或者参考下面拦截
node.js安装 官方文档
安装 Vue脚手架
执行命令:
cnpm install --global vue-cli
安装 Cordova
已经安装cordova则跳过,否则执行下面命令：
npm install -g cordova
创建Cordova项目 官方文档 W3C文档
执行命令:
cordova create hello com.example.hello HelloWorld
参数说明:
| 名称 | 必填 | 描述 |
|---|---|---|
| hello | 是 | 工程的文件夹名 |
| com.example.hello | 否 | 应用程序的id, 名如果不指定的话默认为io.cordova.hellocordova |
| HelloWorld | 否 | App的名称 |
添加Android平台
执行命令
cordova platform add android
创建Vue项目 vue2官网
执行命令
vue init webpack vue-app
在执行命令是会出现下面的配置选项，前3个分包为项目名称、项目描述、和作者。后面几个配置是js相关，一般没什么特殊要求可以按照下面配置。
最终的项目结构：
修改vue项目的index.html
1. 在head之间加入下面代码
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
如果加入<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">导致页面样式改变，如果改变则不加，否则还是建议加上。这段主要是防止跨站脚本攻击。
2. 修改vue-app文件中config下的index.js的build配置项
3. body中引入cordova.js
<body>
<div id="app"></div>
<script type="text/javascript" src="cordova.js"></script>
<!-- built files will be auto injected -->
</body>
打包
执行cordova的打包签名需要将java的环境和android的sdk环境配置好才能执行。由于写起来篇幅比较长，下面给产业一篇是我在网上找了一篇还算是写的清楚的文章。AndroidStudio环境搭建
。如果感觉还有疑问可以留言或者自己在网上找找其他的资料。
1. 如果vue项目中修改或者添加了代码需要build到外层cordova项目的www文件中。(执行命令下面前，如果是新建的vue的项目别忘了先执行 npm i 这个命令去自带下载一下vue用到的组件。)
执行命令:(要cd到vue项目中执行)
npm run build
执行此命令，如果cordova没有www文件夹，会创建该文件并将vue的代码添加进来。如果有www文件则不会重复创建，只会把vue文件添加进来。
2. 如果需要打包android的apk可执行下面命令
cordova build android
生成的apk路径为：
3. 如果不需要打apk包，只要执行下面命令就可以项目运行在手机中。（主要手机要用数据线和电脑连接并开启usb调试的功能）
cordova run android
上面都是debug调试的方式。当然正式发布的时候是不可能使用debug包的。打成签名包有几种方式。我用的是androidstudio自带的签名打包方式。下面我会给出来网上找的打包签名的方式。
Cordova相关连接：
Vue 2.0 + cordova 构建Android应用（一）
Vue相关连接：
