ionic/vueが2019年4月にβ版がリリースされたということでα版との違いなどを調べてみました
ionic/vueもβ版になったのでちゃんと触ってみた 2019/04/27 Kyoto.js #16chan_kaku
View Slide
自己紹介フリュー株式会社 サーバーサイドエンジニア 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 supporteda. 双方向バインディングのディレクティブであるv-modelが使えない● Stack navigation for deep transitions is under heavy development at thistime.a. 次のページで解説● ネイティブのAPIが使えないa. これはまだAngularでしか使えない
stack navigator1 543212345screenが積み重なっている感じ
まずは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
いろんなComponentで遊んでみる
ion-fab Share
ion-cardnamechankakuI love beer.
ion-card
感想● GooglePlay StoreでもPWAでアプリを配信できるようになったし、iOSも12.2でPWAのOAuthがちゃんと使えるようになったので、PWAでいいのではと思ったり● 今のところ(2019/04現在)はVueでちゃんとしたプロダクトとしてネイティブアプリを作るのは辛いイメージ
まとめ● IonicのRouterAPIを使うことができるようになった● Ionic/VueでもIonicのComponentが結構使えるようになった