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ではうまくいくようです。