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

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
15. None

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>
18. None

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が結構使えるようになっ た