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

K.JDong
3 min readDec 27, 2020

文章搭配專案

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

一、 創建及合併專案

此時,會出現這個畫面

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

二、 設定環境

  • 新增Vue設定檔
  • 在vue.config.js 輸入以下
  • 安裝Cordova Plugin環境
$ npm install vue-cordova
  • main.js中加入
  • .gitignore加入這三個資料夾名稱
    iosandroidwww

Cordova Plugins 安裝

使用 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

--

--

K.JDong

吃草的男紙🌱。 深怕自己的記憶會隨時間消逝,恨不得把每一刻都記錄下來📝