Vue-CLI3.0に対応したCordova用のプラグインを作成しました。まだbetaではありますが、最低限動きます。
https://github.com/dekimasoon/vue-cli-plugin-cordova
使い方
事前に Vue-CLI3.0 のインストールと、Cordovaの開発環境の準備が必要です
$ vue create my-project # Vue-CLI3.0でプロジェクトを作成します。TSにも対応しています。
$ cd my-project
$ vue add cordova # 本プラグインをmy-projectに追加します
$ npm run cordova-serve # cordovaに適した形でwebpack-dev-serverを起動します
# 別のタブで
$ cordova platform add ios # my-projectの対応プラットフォームにiOSを追加します
$ cordova run ios # my-projectをiOS上で実行します。YATTA!
その他プラットフォームについてなど、もう少し詳しい内容をスタートガイドに書きました。こちらも合わせて御覧ください。
シミュレータ・実機でのHot Reload対応
npm run cordova-serveした後に、cordova run iosしてもらえれば、それだけでHotReloadするはずです。とても便利
実機でうまく動かない場合は、PCとテスト用端末が同じLANに接続していることと、テスト端末->PCのアクセスを阻むファイヤウォールなどが無いことをご確認ください。
仕組みとしては、以下になります。
- pluginの初期化処理で、
public/cordovaからplatformsへのシンボリックリンクを作成しておく。こうすることで、webpack-dev-serverからplatforms以下のファイルにアクセスできるようになる。 -
npm run cordova-serve時に、www/index.htmlをリダイレクト用のhtmlに差し替える。 - iOS/Android上でアプリケーションが実行されると、まず(2)のリダイレクト用のindex.htmlが読み込まれる。このリダイレクト用のindex.htmlで、webpack-dev-serverが起動しているIPにリダイレクトさせる。
- リダイレクトしただけだと、cordova.jsや各plugin用のjsが読み込まれないため、(1)で用意したシンボリックリンクを使って、動的に適切なcordova.jsを読み込ませる。
この方法はシンプルですが、デメリットもあります。
一番大きいのが、webpack-dev-serverが起動しているIPへのリダイレクトを許可にするために、allow-navigationをユルユルにしておかないといけない点です。TODOも付けてはいますが、ご注意ください。
最後に
「今更Cordovaなんてダサいよな。ReactNativeかWeexだよな。」という声がどこからか聞こえて来る気もしますが、web、iOS、Androidの全てにワンソースで対応でき、かつネイティブ通知なども実装できるCordovaは、リソースの少ない個人開発者にとってまだまだ使える技術だと思っています。
大本のVueCli3.0自体がまだbetaだったり、本プラグインにも未実装なTODOがありますが、Vuejs+Cordovaに関心がある方はぜひ一度使ってみてください。
動かねーぞという罵声、お待ちしております 