ionic/vueもβ版になったのでちゃんと触っ てみた
 2019/04/27 Kyoto.js #16 chan_kaku

自己紹介 フリュー株式会社
 サーバーサイドエンジニア
 Vue歴約1年(v-kansai運営)
 ライブ、フェス、ベース、お酒
 特にビールが大好きだよ
 仕事
 趣味
 Twitter @chan_kakuz

前回のKyoto.jsで、、、

https://speakerdeck.com/takumiz19/vuedeneiteibuapuriwozuo-ridao-su

前回もvue/ionicの話をしたが、、、

動機

動機 ● VueConf USAでionic/vueのβ版について発表された ● α版からどうなったのか気になった

β版でできるようになったこと ● Vue Routerがついに ● その他色々IonicのComponentsが使えるようになったっ ぽい(公式アナウンスはない)

β版でもできないこと ● The shorthand v-model binding is currently not supported a. 双方向バインディングのディレクティブであるv-modelが使えない ● Stack navigation for deep transitions is under heavy development at this time. a. 次のページで解説 ● ネイティブのAPIが使えない a. これはまだAngularでしか使えない

stack navigator 1 5 4 3 2 1 2 3 4 5 screenが積み重なっている感じ

まずはrouterを使ってみる

routerを使う vue cliで作ったプロジェクト にrouterを追加

ionic追加 import Vue from 'vue' import App from './App.vue' import router from './router' import Ionic from '@ionic/vue'; import '@ionic/core/css/ionic.bundle.css'; Vue.use(Ionic); Vue.config.productionTip = false; new Vue({ router, render: h => h(App) }).$mount('#app') 追加 src/main.js

IonicVueRouterを追加 import Vue from 'vue' import Home from './views/Home.vue' import { IonicVueRouter } from '@ionic/vue'; Vue.use(IonicVueRouter); export default new IonicVueRouter({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ './views/About.vue') } ] }); 追加 VueRouterを使いつつ、Ionic のRouterAPIを 使うためのもの src/router.js

No content

いろんなComponentで遊んでみる

ion-fab Share

No content

ion-card name chankaku I love beer.

ion-card

感想 ● GooglePlay StoreでもPWAでアプリを配信できるよ うになったし、iOSも12.2でPWAのOAuthがちゃんと 使えるようになったので、PWAでいいのではと思った り ● 今のところ(2019/04現在)はVueでちゃんとしたプロ ダクトとしてネイティブアプリを作るのは辛いイメージ

まとめ ● IonicのRouterAPIを使うことができるようになった ● Ionic/VueでもIonicのComponentが結構使えるようになっ た