什么是 cordova
cordova 是由 Apache 基金會(huì)支持的，使用 HTML5 + CSS3 + JS 來構(gòu)建多平臺(tái) APP 程序的開發(fā)框架。其支持調(diào)用手機(jī)系統(tǒng)（Android、IOS、Windows phone）原生 API，它可以將你寫的 Web 程序包裹進(jìn)原生的 APP 殼中，也就是我們常說的 Hybrid APP （混合應(yīng)用）。本文是一個(gè)前端開發(fā)者如何從 0 開始結(jié)合 Vue 來構(gòu)建一個(gè)簡(jiǎn)單的 APP.
第一步，安裝 cordova
安裝 cordova
cordova 提供一個(gè)可以全局安裝的腳手架工具，我們使用 npm 來安裝，你的電腦還沒有 npm 的話，需要先安裝 node，node 本身自帶 npm 包管理器，安裝好 node 之后，我們打開命令行程序，輸入以下命令，全局安裝 cordova：
npm install -g cordova
下載完之后，輸入 cordova -v 查看是否成功安裝，出現(xiàn)相應(yīng)的版本號(hào)則成功安裝。
創(chuàng)建 cordova 程序
安裝好之后，我們來新建一個(gè) cordova 應(yīng)用，在命令行輸入以下命令新建：
cordova create learn-cordova
其會(huì)在當(dāng)前目錄下生成以下項(xiàng)目結(jié)構(gòu)：
其中，我們重點(diǎn)關(guān)注 www 和 platforms 目錄，我們寫的 HTML/CSS/JS 代碼就放在這個(gè)目錄下面，現(xiàn)在這個(gè)目錄下面已經(jīng)有 cordova 為我們提供的示例項(xiàng)目代碼。
platforms 是用來存放我們?yōu)橄鄳?yīng)的系統(tǒng)平臺(tái)打包的運(yùn)行源碼，它現(xiàn)在是空的，我們依次執(zhí)行以下命令來添加相應(yīng)的平臺(tái)：
cordova platform add android --save
cordova platform add ios --save
cordova platform add browser --save
添加完成之后，我們可以在 platforms 文件夾下面看到 android 和 ios 文件夾。我們可以使用下面這行命令來查看我們已經(jīng)添加的平臺(tái)和可以添加的全部平臺(tái)：
cordova platform
添加完平臺(tái)之后，我們可以使用 cordova run < platform > 來運(yùn)行相應(yīng)平臺(tái)的代碼，作為前端開發(fā)者，我們可以首先在瀏覽器里面跑起來我們的項(xiàng)目：cordova run browser （前提是你前面添加了 browser 平臺(tái)），默認(rèn)情況下，它會(huì)在 8000 端口打開項(xiàng)目：
如果你想查看它在安卓平臺(tái)下的效果，則需要安裝配置 Android SDK 環(huán)境，包括 Java JDK 的安裝和環(huán)境變量配置， Android SDK 的安裝和環(huán)境變量配置。這個(gè)過程可以通過 Android studio 來更高效地安裝配置，當(dāng)然，如果你的項(xiàng)目不涉及調(diào)用原生 API 的話，則可以直接下載 SDK Manager 管理工具來下載，進(jìn)去依次點(diǎn)擊 "Android SDK 工具"，在下拉菜單中選擇 "SDK Tools"， 然后在表格中選擇相應(yīng)的平臺(tái)所需的 SDK 包，建議直接下載 zip，下載完之后，在環(huán)境變量中配置（具體過程可以百度，很簡(jiǎn)單）。
配置完成之后，在剛下載好的 SDK manager 中打開 SDK Manager.exe 文件，在打開的界面中下載相應(yīng) API 級(jí)別的 SDK （推薦安裝 Android 8.0 級(jí)別）就可以了，其中 Tools 下面的前三項(xiàng)必須安裝，需要注意的是，這些 SDK 都比較大，準(zhǔn)備好硬盤空間。
一切環(huán)境配置好之后，就可以通過 cordova run android 來調(diào)試你的應(yīng)用在 Android 系統(tǒng)下的表現(xiàn)了。
當(dāng)然，你想打包出來 apk 可安裝文件的話，也可以通過一行命令解決：
cordova build android
打包成功之后的安裝包可以在 "platforms → android → app → build → outputs → apk → debug" 下面找到。
以上就是一個(gè)簡(jiǎn)單 APP 的打包過程。
如何打包 Vue 項(xiàng)目
如果我們已經(jīng)編寫好了 Vue 項(xiàng)目，想把 Vue-cli 項(xiàng)目打包成一個(gè) APP，該怎么做呢？很簡(jiǎn)單，把你的 Vue 項(xiàng)目文件夾移到和 cordova 項(xiàng)目同一級(jí)的位置（這不是必須，主要是好管理），如下：
放好之后，我們需要修改 Vue 項(xiàng)目的打包配置文件：
config - index.js:
build - utils.js
其主要目的是將 Vue 項(xiàng)目的打包目錄設(shè)置我們我們 cordova 項(xiàng)目的 www 項(xiàng)目之下。
完成之后，在 vue 項(xiàng)目目錄下運(yùn)行 npm run build 打包 vue 項(xiàng)目，完成之后，我們會(huì)發(fā)現(xiàn) cordova 項(xiàng)目 www 文件夾下出現(xiàn)了我們打包出來的 dist 文件夾和 index.html 入口文件。
我們回到 cordova 項(xiàng)目目錄，在其下執(zhí)行 cordova build <platform name> 就可以打包出 vue 項(xiàng)目了。
以上就是使用 cordova 項(xiàng)目構(gòu)建 APP 的基本過程，當(dāng)然使用 cordova 的原因在于我們可以通過添加插件來?yè)碛?Web 開發(fā)不曾擁有的原生功能體驗(yàn)，這些，通過學(xué)習(xí)多多嘗試。
