當下APP市場，因為Native APP開發成本高，Web APP不穩定，混合開發APP大行其道，成為越來越多開發者的首選。Hybrid APP開發框架也比較多，Weex、Ionic、PhoneGap、WeX5……今天嘗試一下用Cordova+Vue來構建。
1. Cordova是什么？
Apache Cordova 的前身是PhoneGap，是從PhoneGap中抽出來的核心代碼。
Cordova是一個開源的移動開發框架。允許你用標准的web技術-HTML5,CSS3和JavaScript做跨平台開發。 應用在每個平台的具體執行被封裝了起來，並依靠符合標准的API綁定去訪問每個設備的功能，比如說：傳感器、數據、網絡狀態等。（摘自Cordova中文文檔）
下面是Cordova中文文檔中的cordova應用架構的高級視圖：
說簡單點，Cordova就是把我們的web頁面用原生代碼進行包裝，並提供給我們js可以調用的訪問原生設備功能的接口，最后生成一個可以在原生設備上進行安裝的安裝包。
2. Vue項目
Vue大家應該都很熟悉了，下面新建一個Vue項目。
# 初始化新建項目
vue init webpack vue-app
# 安裝依賴
cd vue-app
npm install
# 啟動服務
npm run dev
# 打包項目
npm run build
修改config/index.js文件：
assetsSubDirectory：static這個二級目錄不需要，改為空；
assetsPublicPath：默認為根路徑，改為當前相對路徑；
productionSourceMap：用於支持打包后的調試，改為false，可以加快打包速度；
build生成的文件位於dist目錄下，先放着備用。
3. 構建Cordova項目
# 安裝6.0.0版本的cordova
npm install -g cordova@6.0.0
# 創建一個cordova項目，項目名為cordova-vue-app，包名（Boundle ID）為com.kw.cvtest，APP名稱為cvapp
cordova create cordova-vue-app com.kw.cvtest cvapp
將剛剛創建的Vue項目dist目錄下的文件全部拷貝到cordova項目www目錄下，
然后添加android平台：
cd cordova-vue-app
cordova platform add android --save
上面步驟完成之后，cordova-vue-app/platforms目錄下會生成android文件夾，這就是安卓平台代碼了。
4. as打包APK
cordova有打包apk的命令，但是打包速度實在太慢，我們一般把生成的原生代碼用eclipse或者android studio打包，IOS需要在Mac環境下用XCode打包，這里沒有Mac，先看安卓。
沒有用過android studio的先去下載安裝，包括Android SDK。
安裝完成打開android studio，導入項目時選擇import from gradle，選擇build.gradle點擊確定等待gradle編譯，這里如果編譯失敗，大多是因為gradle插件版本和gradle版本之間的對應問題，可以參考《Android Studio中由於gradle插件版本和gradle版本對應關系導致的編譯失敗的問題》。
編譯完成之后，菜單欄選擇build apk就可以打包apk包了。
5. Cordova-Android項目主要目錄簡介
/assets/www：web頁面文件
/res：不同尺寸APP啟動頁，logo圖片，APP名稱等配置
/src：APP主Activity，以及我們自定義的插件等放在這里
AndroidManifest.xml：Android項目必需的也是最重要的一個文件，包名、版本號、應用所需要的權限都在這里配置，項目中用到的所有四大組件都需要在這里注冊。
以上，將打包出來的apk安裝在手機上看看效果吧~這里只是混合開發APP的一個簡單實現，還未達到生產要求，在項目架構上對於web頁面和cordova插件的結合之后還需要深入研究，歡迎評論區留言討論。