vue-cli&webpack&Onsen UIでHello World!

onsen-ui Vue.js

今回は、vue-cliとwebpack、Onsen UIを使ってHello Worldを表示して見たいと思います。

Onsen UIとは?

Onsen UIはモバイルアプリに特化したUIコンポーネントの集まりで、iOSやAndroidのデザインや機能に準拠した作りになっているのが特徴です。

実際に公式のガイドを見てもらうと一番よくわかるのですが、
iphoneやAndroidのUIそっくりに作れるのです。

https://onsen.io/

Webアプリをスマートフォン向けに作成する際には、とても重宝するのではないでしょうか。


出典:https://onsen.io/

公式サイトを覗くと、JavaとObjective-Cをディスってるっぽい挿絵もあります。

挑戦的です。

vue-cliのプロジェクトを作成

まずは、プロジェクトを作成しましょう。

今回、Vue Routerは使わずに実装します。

下記の記事を参考にしてください。

https://junpeko.com/vue-cli/

Onsen UIのインストールと設定

下記のコマンドでonsenuiとvue-onsenuiをインストールします。

また、main.jsにWebpack用のcssとvue-onsenuiのプラグインを登録します。
main.js

これで、Onsen UIを使用する準備は完了です。

Onsen UIコンポーネントを使ってみる

ここからは、Onsen UIタグを利用してOnsen UIコンポーネントを作成していきます。使いたいコンポーネントを下記のリンクを参考に追加していきます。

https://ja.onsen.io/v2/api/vue/

コードを追加していくだけで、イケてるデザインのWebアプリが作れてしまうのです。

 

ボタンを押すとクリックイベントでHello World!のダイアログを表示させるというのをやってみましょう。

 

App.vue

 

次に、App.vueの子コンポーネント、HelloWorld.vueを作成します。

HelloWorld.vue

この様な動作になりますよー。