<style> .markdown-body{ font-family: Menlo,Monaco,Consolas,"Courier New",monospace,"微軟正黑體" ; } </style>
# Vue Cli4 + Cordova

###### tags: `VueJS`,`佩泥的筆記區`,`筆記`

> 不要隨意更改內容，고만습니다。:wink:
> 只是筆記區，可能有錯誤:cry:

## 請確認已完成環境建置
> 請參考
> [JDK、Android Studio、Gradle下載、安裝和環境變數配置](https://hackmd.io/@dS9O1GnxQ2OLRV78HTm_nA/environment-setting)
* 驗證環境

> 參考網站 https://juejin.im/post/5e12b081f265da5d174dcb90

### 1. 建立Cordova項目

mkdir cordova
cd cordova
cordova create cordova-project

### 2. 添加Android平台

cd cordova-project
cordova platform add android

> 預設安裝最新Android版本

* 查看是否符合建構平台需求

cordova requirements

### 3. Cordova打包APK測試

cordova build android

* 使用Android Studio打開AVD，將apk檔案拉進畫面安裝測試
> 看到此畫面代表成功

### 4. 新建Vue cli
* 注意：記得先確認是否安裝Vue CLI

npm install -g @vue/cli

安裝完成後用vue -V，檢查是否安裝成功。

* 建立vue cli專案

cd cordova
vue create [專案名稱]

> 選項(選擇手動Maually select features)

> 手動操作請參考以下(依個人需求設定)
> https://ithelp.ithome.com.tw/articles/10216606
https://book.vue.tw/CH3/3-1-vue-cli-introduction.html
https://ithelp.ithome.com.tw/articles/10216606

cd [專案名稱]
npm install 
npm run serve

* 瀏覽器打開出現這畫面，代表成功

### 4. 新建vue.config.js
* 在專案目錄底下新建vue.config.js
* 其他的配置可以參考 https://cli.vuejs.org/zh/config/

const webpack = require('webpack');

module.exports = {
  publicPath: './',
  //這個值也可以被設置為空字符串（''）或相對路徑（'./'），
  //這樣所有的資源都會是相對路徑，這樣被部署在任意路徑，也可以用在類似Cordova hybrid應用的文件系統中。
  outputDir: '../cordova-project/www',
  productionSourceMap: false
  //如果你不需要生產環境的 source map，可以將其設置為 false 加速生產環境建構
}

### 5. Cordova + Vue Cli打包APK測試

cd cordova-project
cordova build android

* 使用Android Studio打開AVD，將apk檔案拉進畫面安裝測試

> 看到此畫面代表成功

### 6. 更換APP Icon樣式 及 APP 名稱、以及APP起始頁面
> 請參考 [圖示和啟動畫面](https://cordova.apache.org/docs/zh-tw/9.x/config_ref/images.html)
> 皆在config.xml裡面設定
#### 設定APP Icon
> 可以通過<icon>元素定義應用程序圖標。如果未指定圖標，則使用Apache Cordova預設。
> 以下配置可用於定義單個默認圖標，該圖標將用於所有平台。

<icon src="res/icon.png" />

> 若是沒有res資料夾請在/cordova/cordova-project/底下，
建立一個res資料夾將icon放置在此處。
* 請先安裝Splashscreen Plugin

cordova plugin add cordova-plugin-splashscreen

#### 設定起始畫面
> Android平台
> * land為橫式、port為直式

<platform name="android">
    <!-- you can use any density that exists in the Android project -->
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>

    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>

> Ios平台

<platform name="ios">
    <!-- images are determined by width and height. The following are supported -->
    <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
    <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
    <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
    <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
    <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
    <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
    <splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/>
</platform>

> 如不想有起始畫面

<preference name="SplashScreenDelay" value="0" />

> 如不想有Spinner旋轉進度

<preference name="ShowSplashScreenSpinner" value="false"/>

> 禁用滾動

<preference name="DisallowOverscroll" value="true" />

> 允許 HTML5 媒體重播顯示內聯在螢幕佈局，使用瀏覽器提供的控制項，而不是本機控制項內

<preference name="AllowInlineMediaPlayback" value="true" />

#### 強制全螢幕顯示
* 請先安裝Full Screen Plugin

cordova plugin add cordova-plugin-fullscreen

<preference name="Fullscreen" value="true" />