備忘録

備忘録

Cordova + Vue.js + Onsen UI + ESLint + webpack で helloworld する

Ⅰ. はじめに

タイトルの通り「Cordova + Vue.js + Onsen UI + ESLint + webpack で helloworld する」方法です。

Ⅱ. やり方

環境準備

1. vue-cliのインストール
$ npm install -g vue-cli
2. cordovaのインストール
$ npm install -g cordova
3. Vue.js +Onsen UI + webpack のテンプレートを使って初期化する
$ vue init OnsenUI/vue-cordova-webpack hello-world
$ cd hello-world
$ npm install
4. Cordova で 対象プラットフォームとして Android を追加する
$ cordova platform add android
// $ cordova platform add ios
// $ cordova platform add browser

実行

Cordova で Androidアプリとして実行する
$ npm run build
$ cordova run android
webpack で Webアプリケーションとして実行する
$ npm run dev
実行結果

f:id:kagasu:20170729140203p:plain