一個採用 Vue.js 、 Cordova 及 Capacitor 套件而成的 Hybrid App

文章搭配專案

hanc1027/vue-cor-cap-ForExample

前置作業：Vue與Cordova專案融合

一、 創建及合併專案

此時，會出現這個畫面

請選擇 Merge ，讓兩個專案合併

二、 設定環境

• 新增Vue設定檔

• 在vue.config.js 輸入以下

• 安裝Cordova Plugin環境

$ npm install vue-cordova

• main.js中加入

• .gitignore加入這三個資料夾名稱
  ios 、android、www

Cordova Plugins 安裝

• 執行指令：$ cordova plugin add cordova-plugin-device
• 此專案使用到的plugins
• cordova-plugin-ble-central

使用 Cordova 指令輸出

各App平台輸出專案位置

1. iOS：./platforms/ios
2. Android：./platforms/android

Vue輸出app專案

• 若platforms下無此專案，請執行：

1) iOS： $ cordova platform add ios

2) Android：$ cordova platform add android

• 若platforms下已有此專案，且Vue專案已做更改，需重新輸出App，請執行：

1) iOS：

$ npm run build
$ cordova build ios
# 此專案也寫好了Script，可直接執行
$ npm run cor_ios

2) Android：

$ npm run build
$ cordova build android
# 此專案也寫好了Script，可直接執行
$ npm run cor_android

使用 Capacitor 指令輸出

安裝 Capacitor

$ npm install — save @capacitor/core @capacitor/cli

初始化Cap

$ npx cap init

Capacitor輸出設定檔

• capacitor.config.json

各App平台輸出專案位置

• iOS：./ios
• Android：./android

Vue輸出app專案

若無app專案，請先執行：

• iOS： ```$ npx cap add ios```
• Android：```$ npx cap add android```

若已有app專案，且Vue專案已做更改，需重新輸出App，請執行：

• iOS：

$ npm run build
$ npx cap copy
$ npx cap open ios
# 此專案也寫好了Script，可直接執行
$ npm run cap_ios

• Android：

$ npm run build
$ npx cap copy
$ npx cap open android
# 此專案也寫好了Script，可直接執行
$ npm run cap_android

觀看UI修改，Hot Reload

$ npm run serve