The sky is the limit

ハイブリッドアプリ開発、PWAなど効率の良いiOSアプリ、Androidアプリ開発の情報を共有したい。アプリ開発は楽しい。【PWA、AngularJS、Monaca、Cordova、OnsenUI】

【ハイブリッドアプリ開発】Vue.jsとwebpackとCordovaでアプリ開発【Vue.js/Cordova/webpack】

【ハイブリッドアプリ開発】Vue.jsとwebpackとCordovaでアプリ開発【Vue.js/Cordova/webpack】

f:id:duo-taro100:20160218004611p:plain

今までは、MonacaのクラウドIDEを使用して開発していたが、今回からはVue.jswebpackCordovaを使って、ローカル環境で開発をしていく。
Monacaを使用していた時は、OnsenUIを使用していたが、その必要もなくなった。
ちょうどいいものがあったので、これを元にアプリを作っていく。

github.com


これが、
・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」とエラーが出たら、下記記事の下の方に記載があるので参考に。

www.sky-limit-future.com


うまくいけば、サンプルの動きが確認できる。
サンプルといっても様々な動きを実装してくれているので、かなり嬉しい。
次回以降は、これを元にアプリを実装していく。