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そっくりに作れるのです。

Onsen UI 2: Beautiful HTML5 Hybrid Mobile App Framework and Tools
Make beautiful hybrid mobile apps using HTML5, CSS and JavaScript. Works with or without any framework including Angular, Meteor, React and Vue. iOS and Android...

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


出典:https://onsen.io/

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

挑戦的です。

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

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

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

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

vue-cliの始め方・vue.jsを入門してみよう
前提条件 前提条件として、node.jsとnpmがinstallされている必要があります。 node -v npm -v で確認しておきましょう。 もし、インストールがまだの場合は以下のリンクを参照してください。 w...

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コンポーネントを作成していきます。使いたいコンポーネントを下記のリンクを参考に追加していきます。

Onsen UI 2 Docs for Vue 2 - Onsen UI Framework - Onsen UI
ハイブリッドアプリとPWAのためのUIフレームワーク。Web Componentsに準拠し、React、Angular 1と2+、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>

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