ionic+capacitor プロジェクトの構築

公式ドキュメント#

Android アプリケーションを開発するには、いくつかの Android SDK パッケージをインストールする必要があります。SDK バージョン API 22 以上。
Android Studio で、メニューから Tools -> SDK Manager を開き、SDK Platforms タブでテストするプラットフォームのバージョンをインストールします。
1 つの API バージョンをインストールするだけで大丈夫です。Android 10 (API 30) Android 11 (API 31) Android 13 (API 33)

npm install -g @ionic/cli

ionic start myApp blank --type vue

ts 依存関係を削除します。
npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript vue-tsc
.ts ファイルを.js ファイルに変更します。
index.html ファイルの
ts 関連の eslint ルールを削除します。.eslintrc.js ファイルの @vue/typescript/recommended @typescript-eslint/no-explicit-any: ‘off’を削除します。
Array と RouteRecordRaw のインポートを削除します。
src/shims-vue.d.ts を削除します。
tsconfig.json ファイルを削除します。
package.json ファイルのスクリプトを変更します、"build": "vue-tsc && vite build" -> "build": "vite build"。
terser をインストール npm i -D terser。(terser は js コードを圧縮するために使用されます)

Capacitor をプロジェクトに追加します:
ionic integrations enable capacitor
プロジェクトを構築し、対応するプラットフォームを選択します
ionic build
ionic cap add ios
ionic cap add android
標準のネイティブ IDE（Xcode と Android Studio）を使用して iOS と Android プロジェクトを開き、構築し、実行します:
ionic cap open ios
ionic cap open android

npx cap copy
Web アプリケーションのビルドと Capacitor 設定ファイルをローカルプラットフォームプロジェクトにコピーします。Web アプリケーションを変更したり、設定値を変更したりするたびにこのプログラムを実行します。
npx cap update
package.json で参照されているネイティブプラグインと依存関係を更新します。
npx cap sync
このコマンドは copy を実行し、その後 update を実行します。
npx cap ls
インストールされているすべての Cordova および Capacitor プラグインをリストします。

ionic build
Web リソースを構築し、任意のプラットフォームのターゲット用にアプリケーションを準備します
ionic serve
アプリケーションの開発 / テストのためにローカル開発サーバーを起動します
ionic capacitor open
プロジェクトを対応するエディタで実行します（iOS 用の Xcode、Android 用の Android Studio）