今回は、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をインストールします。
npm install onsenui vue-onsenui --save-devまた、main.jsにWebpack用のcssとvue-onsenuiのプラグインを登録します。
main.js
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
<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
<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>
この様な動作になりますよー。
