版權聲明：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
本文鏈接：https://blog.csdn.net/zxj0904010228/article/details/83143563
1. 前言：在進行hybrid app開發時，可以采用vue.js前端框架進行h5頁面開發，然后使用跨平台cordova工具打包成app，如android或ios等，再h5頁面也可以使用cordova豐富的插件調用原生代碼，獲取設備相關信息、調取手機攝像頭等
2. 創建cordova項目
1） 創建cordova項目
前提：安裝node和cordova，安裝方式很簡單，自行百度就可以了
cordova create cordovaApp com.test.cordova myApp
2）創建平台
進入cordovaApp目錄
cordova platform add android 創建android平台
或cordova platform add ios 創建ios平台
3）cordova打包命令，打包成apk的時候使用
cordova build android 此時會將cordovaApp/www目錄下的文件打包成apk文件，即可安裝到手機
3. 在cordova項目目錄下創建vue 項目
在當前cordova項目目錄下，使用vue-cli腳手架創建vue項目
vue init webpack vue-src
4. vue項目創建完成后的混合app框架如下，其中vue-src目錄是vue項目，在該目錄下進行前端代碼開發：
5. 修改vue配置，完成hybrid app框架搭建
1) 使vue項目的build輸出路徑指向cordova目錄下的www
vue-src/config/index.js
2）vue項目的index.html頁面加入cordova.js
index.html
6. 打包
如果需要調用原生api，可使用cordova插件，可百度；
開發完vue項目后，進入vue項目，運行npm run build 打包vue項目，這樣vue項目的打包后的文件就會直接放在cordova項目的www目錄下；然后運行cordova build android打包安卓應用（apk），即可安裝運行在手機上；
7. 效果
版權聲明：本文為CSDN博主「白馬非馬哥」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/zxj0904010228/article/details/83143563