使用cordova + vue搭建混合app框架

版權聲明：本文爲博主原創文章，遵循 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. 效果