Vuetifyを使ったCordovaアプリ開発のサンプル（導入編）

前提条件

• Cordovaの開発環境が構築済み

Vue-Cli 3の導入

npm install -g @vue/cli

確認

vue --vesion
# 3.8.4

vue プロジェクトの作成

vue create sample-app

※プロジェクト名は小文字じゃないとエラーになる。

オプションの選択

色々聞かれるのでとりあえずデフォルトで作成

Vuetify, Cordovaの追加

プロジェクトフォルダに移動しておきましょう

cd sample-app

vuetify

vue add vuetify

全てデフォルトで。

Cordova

vue add cordova

Cordovaソースが置かれる場所、アプリ名、パッケージ名が聞かれます。
ネイティブアプリプラットフォームの設定が保存されているsrc-cordovaに、cordovaプロジェクト用の別のsrcフォルダーが作成されます。

(任意)gitの追加

.gitignoreファイルが自動で生成されているので、ここでgithubのリモートリポジトリを追加します

git remote add origin https://github.com/xxx/xxx.git
git add .
git commit -m "first commit"
git push -u origin master

Cordova関連コマンドの動作確認

Cordova導入時に設定したソースフォルダに移動します。

cd src-cordova

あとは通常のCordovaコマンドが使用できます。

cordova platform ls

vueアプリケーションのソースを弄る

src-cordovaフォルダにいる場合は一旦プロジェクトのルートに移動します

../

ソースを触る際は、src/配下のソースを修正します。

Vueアプリケーションのデバッグ

単純にHTMLとかの確認をしたい場合は、以下のコマンドでサーバーを起動します。

npm run serve

シェルに表示されたアドレスをブラウザで開きます。
（デフォルトはおそらくhttp://localhost:8081）
これで現在のVueアプリケーションがブラウザに表示されます。
Hot reload対応なのでソースを保存すると勝手に画面が更新されます。

vueアプリケーションをcordovaに適用する

vueアプリケーションをビルドします。
とりあえず、ブラウザで実行してみます。

npm run cordova-serve-browser

・・・が、Windowsだとエラーが出てうまくビルドできません。
Githubに同様のissueが上がっていたのでそちらで進展があったら追記します。

※Macではうまくいくようです。