HanC's Blog

Vue Hybrid App 專案初始化

Posted:13th September 2019
3 Minutes
511 Words

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


使用JavaScript開發App-Github

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

  1. 創建及合併專案
Terminal window
1
# 若沒有Cordova指令,需安裝全域Cordova
2
$ npm install -g cordova
3
4
# !!!一定要先創建Cordova的專案,才可以創建Vue專案
5
# 創建Cordova 專案
6
$ cordova create 專案名
7
8
# 創建Vue專案,專案名需與Cordova的一樣
9
$ vue create 專案名

此時,會出現這個畫面
default
請選擇 Merge ,讓兩個專案合併

  1. 設定環境
  • 新增Vue設定檔
Terminal window
1
$ cd 專案名
2
$ touch vue.config.js # 創建Vue的設定檔
  • 在vue.config.js 輸入以下
1
module.exports = {
2
//基本路徑
3
publicPath: './',
4
//輸出文件目錄
5
outputDir: 'www',
6
productionSourceMap:false, //不生成map
7
}
  • 安裝Cordova Plugin環境
Terminal window
1
$ npm install vue-cordova
  • main.js中加入
1
import VueCordova from 'vue-cordova'
2
Vue.use(VueCordova)
3
if (window.location.protocol === 'file:' || window.location.port === '3000') {
4
var cordovaScript = document.createElement('script')
5
cordovaScript.setAttribute('type', 'text/javascript')
6
cordovaScript.setAttribute('src', 'cordova.js')
7
document.body.appendChild(cordovaScript)
8
}

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:
    Terminal window
    1
    $ npm run build
    2
    $ cordova build ios
    3
    4
    # 此專案也寫好了Script,可直接執行
    5
    $ npm run cor_ios
    1. Android:
    Terminal window
    1
    $ npm run build
    2
    $ cordova build android
    3
    4
    # 此專案也寫好了Script,可直接執行
    5
    $ npm run cor_android

使用 Capacitor 指令輸出

安裝 Capacitor

Terminal window
1
$ npm install --save @capacitor/core @capacitor/cli

初始化Cap

Terminal window
1
$ npx cap init

Capacitor輸出設定檔

  • capacitor.config.json

各App平台輸出專案位置

  1. iOS:./ios
  2. Android:./android

Vue輸出app專案

  • 若無app專案,請先執行:
  1. iOS: $ npx cap add ios
  2. Android:$ npx cap add android
  • 若已有app專案,且Vue專案已做更改,需重新輸出App,請執行:

    1. iOS:
    Terminal window
    1
    $ npm run build
    2
    $ npx cap copy
    3
    $ npx cap open ios
    4
    5
    # 此專案也寫好了Script,可直接執行
    6
    $ npm run cap_ios
    1. Android:
    Terminal window
    1
    $ npm run build
    2
    $ npx cap copy
    3
    $ npx cap open android
    4
    5
    # 此專案也寫好了Script,可直接執行
    6
    $ npm run cap_android

觀看UI修改,Hot Reload

Terminal window
1
$ npm run serve
Article title:Vue Hybrid App 專案初始化
Article author:HanC
Release time:13th September 2019