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

@ionic/vue で Web アプリを作ってみる

mikakane
February 23, 2019

@ionic/vue で Web アプリを作ってみる

mikakane

February 23, 2019
Tweet

More Decks by mikakane

Other Decks in Technology

Transcript

  1. chatbox.inc Vue Component <template> <section> <div v-if="message"> {{message}} </div> </section>

    </template> <script> export default { ... } </script> <style scoped> </style> AngularJS 風の HTML 記法 .vue 拡張子による SFC 整理されてシンプルな JS API Scoped CSS
  2. chatbox.inc Vue Router const router = new VueRouter({ routes: [

    { path: '/, component: () => import('@/views/Home.vue'), meta: { guestAccessible: true } }, { path: '/repos', component: () => import('@/views/Repos.vue') }, // ... ], }) URL と Vue Component を紐づけ Route にメタプロパティを付与
  3. chatbox.inc Vuex Store import Vue from 'vue' import Vuex from

    'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { ... } mutations: { ... }, actions: { ... } }) state を書き換える mutations 共有のデータストアとして機能する state 非同期に変更を処理する actions
  4. chatbox.inc @modus/ionic-vue This project has been contributed to the Ionic

    core and can be used as @ionic/vue. https://github.com/ModusCreateOrg/ionic-vue
  5. chatbox.inc main.js import Vue from 'vue' import Ionic from '@modus/ionic-vue'

    import App from './App.vue' import '@ionic/core/css/core.css' import '@ionic/core/css/ionic.bundle.css' import '@/assets/scss/common.scss' Vue.use(Ionic) new Vue({ render: h => h(App), }).$mount('#app') ionic の CSS を読み込み Ionic を use
  6. chatbox.inc route import { IonicVueRouter } from '@modus/ionic-vue' const router

    = new IonicVueRouter({ routes: [ // ... ], }) export default router ionic の Router を読み込み URL と Vue Component を紐づけ
  7. chatbox.inc App.vue <template> <ion-app id="app"> <ion-vue-router /> </ion-app> </template> ion-app

    要素の中に ion-vue-router を記述 VueRouter と同じ記述でルートの処理ができる
  8. chatbox.inc components <template> <ion-page class="ion-page" main> <ion-header> <ion-toolbar> <ion-title>{{title}}</ion-title> </ion-toolbar>

    </ion-header> <ion-content class="ion-content" padding> <slot /> </ion-content> <ion-footer> <div class="footer-text">crafted by chatbox</div> </ion-footer> </ion-page> </template> 各種 ion component が使える
  9. chatbox.inc Controller export default { methods: { async detail(){ //

    ... const alert = await this.$ionic.alertController.create(options) alert.present() } } } this.$ionic で 各種 controller にアクセス alert や loading, toast など
  10. chatbox.inc trouble #1 <template> <ion-item> <ion-label position="stacked">Token</ion-label> <ion-input :value="form.token" @input="input"/>

    </ion-item> </template> ion-input で v-model が動作しない :value と @input で動作させる
  11. chatbox.inc trouble #2 export default { mounted(){ setTimeout(async ()=>{ const

    loader = await this.$ionic.loadingController.create({...}) loader.present() },0) }, } mounted hook の中で controller の挙動がおかしい $nextTick ではなく setTimeout で解決可
  12. chatbox.inc Why Vue.js ? プレーンな HTML と ES Style の

    JS モダンなフロント開発の知識が乏しいメンバでも プロジェクトに参加しやすい 豊富な Vue.js ライブラリはそのまま利用可能 通常の Vue.js 開発とほとんど変わりなく利用できる Nuxt.js での利用は Router 周りが微妙っぽい IonicVueRouter が何をしているかの調査が必要 (Nuxt.js で Router をまるっと差し替えるのが厳しそう…?)