ionic/vueもβ版になったのでちゃんと触ってみた

ionic/vueが2019年4月にβ版がリリースされたということでα版との違いなどを調べてみました

Transcript

1. ionic/vueもβ版になったのでちゃんと触っ てみた
 2019/04/27 Kyoto.js #16 chan_kaku
2. 自己紹介 フリュー株式会社
 サーバーサイドエンジニア
 Vue歴約1年(v-kansai運営)
 ライブ、フェス、ベース、お酒
 特にビールが大好きだよ
 仕事
 趣味
 Twitter @chan_kakuz
3. 前回のKyoto.jsで、、、
4. https://speakerdeck.com/takumiz19/vuedeneiteibuapuriwozuo-ridao-su
5. 前回もvue/ionicの話をしたが、、、
6. 動機
7. 動機 • VueConf USAでionic/vueのβ版について発表された • α版からどうなったのか気になった
8. β版でできるようになったこと • Vue Routerがついに • その他色々IonicのComponentsが使えるようになったっ ぽい(公式アナウンスはない)
9. β版でもできないこと • 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でしか使えない
10. stack navigator 1 5 4 3 2 1 2 3 4 5 screenが積み重なっている感じ
11. まずはrouterを使ってみる
12. routerを使う vue cliで作ったプロジェクト にrouterを追加
13. 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
14. 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
16. いろんなComponentで遊んでみる
17. ion-fab <ion-fab vertical="bottom" horizontal="end"> <ion-fab-button>Share</ion-fab-button> <ion-fab-list side="top"> <ion-fab-button> <ion-icon name="logo-facebook"></ion-icon> </ion-fab-button> <ion-fab-button> <ion-icon name="logo-twitter"></ion-icon> </ion-fab-button> <ion-fab-button> <ion-icon name="logo-youtube"></ion-icon> </ion-fab-button> </ion-fab-list> <ion-fab-list side="start"> <ion-fab-button> <ion-icon name="logo-vimeo"></ion-icon> </ion-fab-button> </ion-fab-list> </ion-fab>
19. ion-card <ion-card> <img src="../assets/profile.png"> <ion-card-header> <ion-card-subtitle>name</ion-card-subtitle> <ion-card-title>chankaku</ion-card-title> </ion-card-header> <ion-card-content> I love beer. </ion-card-content> </ion-card>
20. ion-card
21. 感想 • GooglePlay StoreでもPWAでアプリを配信できるよ うになったし、iOSも12.2でPWAのOAuthがちゃんと 使えるようになったので、PWAでいいのではと思った り • 今のところ(2019/04現在)はVueでちゃんとしたプロ ダクトとしてネイティブアプリを作るのは辛いイメージ
22. まとめ • IonicのRouterAPIを使うことができるようになった • Ionic/VueでもIonicのComponentが結構使えるようになっ た