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をインストールします。

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>

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