Onsen UIにはiOSとAndroidのUIガイドラインを忠実に再現したUIコンポーネントが数多く含まれています。
ナビゲーターやリスト、タブバーなど必要なコンポーネントを組み込むだけで、自動的に実行中のデバイスを判別して、ネイティブUIを表示します。
Onsen UIを使うと高品質でサクサク動くモバイルアプリを簡単に開発できます。
Onsen UI for Vueのコンポーネントの一覧はこちらから。
モバイルUIフレームワークははじめてですか?大丈夫です。下記の3ステップで簡単に組み込めます。
Vue.use(VueOnsen);
と書くだけです!この3つのステップですべてのコンポーネントにアクセスできるのです。
# (1) パッケージをインストールします
$ npm install onsenui vue-onsenui --save
// (2) WebpackのCSSインポート
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';
// (2) JSのインポート
import Vue from 'vue';
import VueOnsen from 'vue-onsenui';
// (3) そして使用します
Vue.use(VueOnsen);
// これでVueテンプレートでOnsen UIを使用できます!
new Vue({
el: '#app',
template: '<v-ons-button>Click Me</v-ons-button>',
});
Onsen UIのAPIはVueととても親和性が高く、開発効率をあげてくれます。
Onsen UI for Vueのコンポーネントは、Propsを用いたリアクティブな設計になっています。
すべてのAPIはVue向けにカスタマイズされています。
<template>
<v-ons-carousel :index.sync="carouselIndex"
fullscreen swipeable auto-scroll overscrollable>
<v-ons-carousel-item v-for="url in items">
<img style="width:100%" :src="url">
</v-ons-carousel-item>
</v-ons-carousel>
</template>
<script>
export default {
data() {
return {
carouselIndex: 0,
items: [
'http://placekitten.com/g/300/300',
'http://placekitten.com/g/400/400',
'http://placekitten.com/g/500/500'
]
};
}
};
</script>
Vue CLIを使ってOnsen UIの開発をはじめましょう。PWAやCordova対応のテンプレートを提供しています。
さらに、すばやく開発環境を整えるためのツールが揃っています。Onsen UIファミリーであるMonaca CLIを使うと、複雑な作業もシンプルに。TypeScript、Webpack、Cordovaといったツールから、端末上でのライブリロードやリモートビルドなど、多くの機能が提供されます。
$ vue init OnsenUI/vue-pwa-webpack hello-world
$ vue init OnsenUI/vue-cordova-webpack hello-world
充実したドキュメント、チュートリアル、ガイド、サンプルアプリなど、必要なリソースが揃っています。