公司為了節(jié)約開發(fā)時間,要用Cordova+Vue做項目;所以最近一直在研究Android混開桨踪。自己第一次做混開伪节，也是厚著臉皮向前端請教了很多問題吼砂，才馬馬虎虎搞出來點東西顷帖。下面把最基礎的項目創(chuàng)建記錄一下。
安裝 Npm
這里就不給出具體安裝了渤滞，可以百度一下或者參考下面攔截
node.js安裝 ?官方文檔
安裝 Vue腳手架
執(zhí)行命令:
cnpm install --global vue-cli
安裝 Cordova
已經(jīng)安裝cordova則跳過,否則執(zhí)行下面命令：
npm install -g cordova
創(chuàng)建Cordova項目?官方文檔?W3C文檔
執(zhí)行命令:
cordova create hello com.example.hello HelloWorld
參數(shù)說明:
| 名稱 | 必填 | 描述 |
|---|---|---|
| hello | 是 | 工程的文件夾名 |
| com.example.hello | 否 | 應用程序的id, 名如果不指定的話默認為io.cordova.hellocordova |
| HelloWorld | 否 | App的名稱 |
添加Android平臺
執(zhí)行命令
cordova platform add android
創(chuàng)建Vue項目 ?vue2官網(wǎng)
執(zhí)行命令
vue init webpack vue-app
在執(zhí)行命令是會出現(xiàn)下面的配置選項贬墩，前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>
打包
執(zhí)行cordova的打包簽名需要將java的環(huán)境和android的sdk環(huán)境配置好才能執(zhí)行。由于寫起來篇幅比較長大莫，下面給產(chǎn)業(yè)一篇是我在網(wǎng)上找了一篇還算是寫的清楚的文章蛉腌。AndroidStudio環(huán)境搭建
。如果感覺還有疑問可以留言或者自己在網(wǎng)上找找其他的資料只厘。
1. 如果vue項目中修改或者添加了代碼需要build到外層cordova項目的www文件中烙丛。(執(zhí)行命令下面前，如果是新建的vue的項目別忘了先執(zhí)行 npm i 這個命令去自帶下載一下vue用到的組件羔味。)
執(zhí)行命令:(要cd到vue項目中執(zhí)行)
npm run build
執(zhí)行此命令河咽，如果cordova沒有www文件夾，會創(chuàng)建該文件并將vue的代碼添加進來赋元。如果有www文件則不會重復創(chuàng)建忘蟹，只會把vue文件添加進來。
2. 如果需要打包android的apk可執(zhí)行下面命令
cordova build android
生成的apk路徑為：
3. 如果不需要打apk包们陆，只要執(zhí)行下面命令就可以項目運行在手機中寒瓦。（主要手機要用數(shù)據(jù)線和電腦連接并開啟usb調試的功能）
cordova run android
上面都是debug調試的方式。當然正式發(fā)布的時候是不可能使用debug包的坪仇。打成簽名包有幾種方式杂腰。我用的是androidstudio自帶的簽名打包方式。下面我會給出來網(wǎng)上找的打包簽名的方式椅文。
Cordova相關連接：
Cordova+Vue實現(xiàn)Android APP開發(fā)
Vue 2.0 + cordova 構建Android應用（一）
Vue相關連接：
