ウェブ開発ノウハウを利用してスマートフォンアプリの開発を行うハイブリッドアプリについて、ソリューションの一つとしてCapacitor＋Vue.jsを考えてみました。
メリットは、最初のプロジェクトの作成が非常に簡単にできることですので、プロジェクトの作成手順を紹介します。
Vue.jsプロジェクトの作成
https://qiita.com/jjjjjj/items/a43922631f1350bb9c65
を参照
Capacitorのインストール
以下を参考にしました。
https://capacitor.ionicframework.jp/docs/getting-started
$ npm install --save @capacitor/core @capacitor/cli
Capacitor初期設定
$ npx cap init
index.htmlファイルの場所を変更
capacitor.config.jsonのwebDirをwwwからdistに変更する。
プラットフォームのインストール
$ npx cap add ios
$ npx cap add android
Vueプロジェクトをネイティブにコピーする
$ npx cap copy ios
$ npx cap copy android
IDEを開いてビルド、実行する
$ npx cap open ios
$ npx cap open android