Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

chan_kaku

April 27, 2019
Tweet

More Decks by chan_kaku

Other Decks in Technology

Transcript

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

    2019/04/27 Kyoto.js #16
    chan_kaku

    View Slide

  2. 自己紹介
    フリュー株式会社

    サーバーサイドエンジニア

    Vue歴約1年(v-kansai運営)

    ライブ、フェス、ベース、お酒

    特にビールが大好きだよ

    仕事

    趣味

    Twitter @chan_kakuz

    View Slide

  3. 前回のKyoto.jsで、、、

    View Slide

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

    View Slide

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

    View Slide

  6. 動機

    View Slide

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

    View Slide

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

    View Slide

  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でしか使えない

    View Slide

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

    View Slide

  11. まずはrouterを使ってみる

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  15. View Slide

  16. いろんなComponentで遊んでみる

    View Slide

  17. ion-fab
    Share

















    View Slide

  18. View Slide

  19. ion-card



    name
    chankaku


    I love beer.


    View Slide

  20. ion-card

    View Slide

  21. 感想
    ● GooglePlay StoreでもPWAでアプリを配信できるよ
    うになったし、iOSも12.2でPWAのOAuthがちゃんと
    使えるようになったので、PWAでいいのではと思った

    ● 今のところ(2019/04現在)はVueでちゃんとしたプロ
    ダクトとしてネイティブアプリを作るのは辛いイメージ

    View Slide

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

    View Slide