環(huán)境

開發(fā)App那么肯定是需要安裝一些環(huán)境需要的工具node,npm,cordova,sdk,jdk等，那么這里主要講的不是環(huán)境的安裝就不在細說了，大家都懂~

創(chuàng)建cordova程序

安裝好了環(huán)境之后我們來新建一個cordova的項目，輸入命令行：
cordova create webApp
那么生成之后的結構就是這樣：

圖片.png

platforms 是用來存放我們?yōu)橄鄳南到y(tǒng)平臺打包的運行源碼，它現在是空的，我們依次執(zhí)行以下命令來添加相應的平臺：
cordova platform add android --save 添加安卓平臺
cordova platform add ios --save添加ios平臺
cordova platform add browser --save添加瀏覽器平臺
添加完成之后，我們可以在 platforms 文件夾下面看到 android 和 ios 文件夾。我們可以使用下面這行命令來查看我們已經添加的平臺和可以添加的全部平臺：
cordova platform

添加完平臺之后，我們可以使用 cordova run < platform > 來運行相應平臺的代碼，作為前端開發(fā)者，我們可以首先在瀏覽器里面跑起來我們的項目：cordova run browser （前提是你前面添加了 browser 平臺），默認情況下，它會在 8000 端口打開項目：

如果想用通過cordova run android預覽安卓平臺的話必須先安裝配置Android SDK和JDK等環(huán)境
當然也可以通過cordova build android打包apk可安裝文件，可以在根目錄下的platforms\android\app\build\outputs\apk找到安裝包

如何在cordova項目里打包vue

首先我們通過vue的cli在cordova項目同一級別的位置創(chuàng)建一個vue項目，進入根目錄webApp然后命令行執(zhí)行：
vue init webpack src
這里創(chuàng)建vue項目名稱為src是為了跟cordova項目結構看起來清晰點，這里名字可以隨便起，不一定是src

圖片.png

圖片.png

目的是為了將vue打包到cordova項目中的www目錄下，以便我們打包apk

同時將原來www目錄下的index.html文件里引用的cordova.js拷貝到vue項目public文件夾的index.html里面，這樣項目就有了cordova調用設備的功能
<script type="text/javascript" src="cordova.js"></script>

圖片.png

完成之后，在 vue 項目目錄下運行 npm run build 打包 vue 項目，完成之后，我們會發(fā)現 cordova 項目 www 文件夾下出現了我們打包出來的文件夾和 index.html 入口文件。

圖片.png

回到cordova項目目錄運行cordova build android就能打包出vue項目的App了