今回は、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は使わずに実装します。
下記の記事を参考にしてください。
Onsen UIのインストールと設定
下記のコマンドでonsenuiとvue-onsenuiをインストールします。
|
1 |
npm install onsenui vue-onsenui --save-dev |
また、main.jsにWebpack用のcssとvue-onsenuiのプラグインを登録します。
main.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import Vue from 'vue' import App from './App' // Webpack CSS import import 'onsenui/css/onsenui.css'; import 'onsenui/css/onsen-css-components.css'; import VueOnsen from 'vue-onsenui'; Vue.use(VueOnsen); Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', components: { App }, template: '' }) |
これで、Onsen UIを使用する準備は完了です。
Onsen UIコンポーネントを使ってみる
ここからは、Onsen UIタグを利用してOnsen UIコンポーネントを作成していきます。使いたいコンポーネントを下記のリンクを参考に追加していきます。
https://ja.onsen.io/v2/api/vue/
コードを追加していくだけで、イケてるデザインのWebアプリが作れてしまうのです。
ボタンを押すとクリックイベントでHello World!のダイアログを表示させるというのをやってみましょう。
App.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<template> <div id="app"> <HelloWorld /> </div> </template> <script> import HelloWorld from "./components/HelloWorld"; export default { name: 'App', components: { HelloWorld }, } </script> |
次に、App.vueの子コンポーネント、HelloWorld.vueを作成します。
HelloWorld.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<template id="main-page"> <v-ons-page> <v-ons-toolbar> <div class="center">Title</div> </v-ons-toolbar> <p style="text-align: center"> <v-ons-button @click="$ons.notification.alert('Hello World!')"> Click me! </v-ons-button> </p> </v-ons-page> </template> <script> export default { name: 'HelloWorld' } </script> |
この様な動作になりますよー。
