vue和cordova項目整合打包，並實現vue調用android的相機的demo

通過網上查找不少資料，發現不少只有vue+cordova的項目整合，可是vue使用cordova插件的文章不多，如今把從建立cordova和建立vue到vue使用插件到項目打包到android手機運行過程記錄下來；

先上項目結構目錄

---

cordova項目建立

一、安裝cordova環境這個這邊就不描述了，網上不少教程
二、建立cordova應用

cordova create app com.demo app

cordova create 建立cordova項目 app爲目錄 com.demo命名空間 app項目名稱

三、添加平臺

cd app
cordova platform add android

cd命令進入到項目文件夾裏面添加安卓平臺，要添加ios就把安卓換成ios就能夠了

四、編譯安卓app

cordova build android

編譯安卓系統，若是成功就表示編譯完成
注：若是沒編譯成功，那麼就用檢查環境命令去檢查

cordova requirements

運行命令後會有提示環境或者其餘問題

五、cordova emulate android
在安卓模擬器上運行

cordova serve android

在瀏覽器上面運行

cordova run android

在安卓手機上面運行，前提是電腦鏈接了安卓手機而且裝好驅動和打開usb調試

到這裏cordova項目建立完成

---

vue項目建立

一、vue環境和webpack安裝這邊就不詳述了，網上不少
二、安裝好vue後進入到cordova項目裏面

vue init webpack vue

最後的‘vue’爲項目的名字
三、

四、根據圖上面提示的cd 指向vue項目後 npm run dev用開發模式跑起來項目

vue和cordova項目整合

一、把cordova項目的index.html裏面的meta標籤和cordova.js引用複製到vue項目的index.html

二、修改vue項目裏面的配置，直接上圖，

到這裏修改完成

添加cordova插件

這裏以相機爲例
一、進入到cordova項目目錄，不是vue

cordova plugin add cordova-plugin-camera

添加相機插件

cordova plugin ls

列出全部已安裝的cordova插件

參考w3c的文檔https://www.w3cschool.cn/cord...

到這裏cordova安裝的相機插件

重點來了：vue怎麼用相機

一、修改vue項目的main.js的寫法

添加deviceready事件監聽，當cordova設備準備完成後再new vue
二、建立一個js文件，我這邊叫cordovaplugin.js

三、修改App.vue文件，增長按鈕和事件調用

到這邊就完成了，剩下編譯和打包
四、進入vue文件夾

npm run build

到這邊vue項目編譯完成
五、回到cordova項目文件夾，進行打包

cordova run android

運行到安卓手機上，前提是有用手機鏈接電腦

完成-手機截圖