【ハイブリッドアプリ開発】Vue.jsとwebpackとCordovaでアプリ開発【Vue.js/Cordova/webpack】
今までは、MonacaのクラウドIDEを使用して開発していたが、今回からはVue.jsとwebpackとCordovaを使って、ローカル環境で開発をしていく。
Monacaを使用していた時は、OnsenUIを使用していたが、その必要もなくなった。
ちょうどいいものがあったので、これを元にアプリを作っていく。
これが、
・Vue.js
・Cordova
・webpack
・Framework7
を使った、テンプレート。
最近流行りのVue.js + webpack
クローン
まずは、上記URLのソースを落とす。
クローンしてもいいし、ダウンロードしてもいい。
僕はクローンした。
$ git clone https://github.com/centrual/cordova-template-framework7-vue-webpack.git
プラットフォーム追加 + エミュレータ起動
まずはプラットフォームを追加して、動作確認を行う。
僕の場合、~/project/cordova/cordova-template-framework7-vue-webpack にクローンしたが、cordovaコマンドはこの直下ではなく、
~/cordova-template-framework7-vue-webpack/template_src/
ここで実施しなければならない。
ここではiosのみ解説するが、やり方は変わらない。
Cordovaのios、androidの環境構築については過去記事を参照。
www.sky-limit-future.com
www.sky-limit-future.com
$ cordova platform add ios
エミュレータ起動で動作確認。
$ cordova run ios
もし、「Error: Cannot read property 'replace' of undefined」とエラーが出たら、下記記事の下の方に記載があるので参考に。
うまくいけば、サンプルの動きが確認できる。
サンプルといっても様々な動きを実装してくれているので、かなり嬉しい。
次回以降は、これを元にアプリを実装していく。
