Vue3ベースのIonic-Vueで実機デバッグするまで。

Vue3が発表されてIonic-Vueがβで公開されて少し経ったのでどんなもんか触ってみました。
諸事情あってWindowsで開発環境を構築していますがMacでもほぼ差異なく動きました

ionic/cliをglobalにinstallします。

npm install -g @ionic/cli@testing

my-appはプロジェクト名なので任意に

ionic start my-app tabs --type vue --tag vue-beta

1分程待つと

Your Ionic app is ready! Follow these next steps:

- Go to your new project: cd ./vocbook
- Run ionic serve within the app directory to see your app in the browser
- Run ionic capacitor add to add a native iOS or Android project using Capacitor
- Generate your app icon and splash screens using cordova-res --skip-config --copy
- Explore the Ionic docs for components, tutorials, and more: https://ion.link/docs
- Building an enterprise app? Ionic has Enterprise Support and Features: https://ion.link/enterprise-edition

ionic serve

すると無事動作は確認できました！

Androidアプリとしての開発をしたいので一旦 npm run build します
ここも特に問題なく正常終了。dist配下に諸々生成されるので

npx cap add android

または

capacitor.cmd add android

でAndroidのネイティブプロジェクトを作ります。

? What platform would you like to add? android
> capacitor.cmd add android
√ Installing android dependencies in 24.90s
√ Adding native android project in: 
√ Syncing Gradle in 652.80μp
√ add in 24.97s
√ Copying web assets from dist to android\app\src\main\assets\public in 112.61ms
√ Copying native bridge in 3.06ms
√ Copying capacitor.config.json in 4.43ms
√ copy in 146.39ms
√ Updating Android plugins in 9.65ms
  Found 0 Capacitor plugins for android:
√ update android in 42.47ms

Now you can run npx cap open android to launch Android Studio

Android Studioで開けといわれるので確認します

npx cap open android

で自動的にAndroid Studioが起動するのでgradleのsyncなんかを済ませて…

実機で動作しました！

まだ全然詳細は見れていないですがmanifestのパーミッションがもりもりになっていて、使う予定がないものもがっつり入っているので検証時は楽ですがリリース時には見直しが必要そうです。

    <uses-permission android:name="android.permission.INTERNET" />
    <!-- Camera, Photos, input file -->
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <!-- Geolocation API -->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-feature android:name="android.hardware.location.gps" />
    <!-- Network API -->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <!-- Navigator.getUserMedia -->
    <!-- Video -->
    <uses-permission android:name="android.permission.CAMERA" />
    <!-- Audio -->
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>

ほぼドキュメント通りでハマりどころもなく実機検証までできたので、このペースでβが外れてくれるとうれしいですね。