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

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

D0cbc297e483306fb188649ea56f0c8d?s=47 mikakane
February 23, 2019

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



February 23, 2019

More Decks by mikakane

Other Decks in Technology


  1. chatbox.inc 後藤 知宏 @ionic/vue で Webアプリを作ってみる

  2. chatbox.inc 後 藤 知 宏 株式会社chatbox 代表取締役 関西フロントエンドUG代表 Twitter :

    @_mikakane エンジニア / 技術顧問
  3. chatbox.inc Vue.js ナウでヤングな JS フレームワーク 原宿を中心に熱狂的なムーブメント

  4. chatbox.inc Start Project $ vue create vue-ionic-app cli ツールを利用してプロジェクトを開始 開発サーバや

    lint の設定もセットアップ済み
  5. 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
  6. 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 にメタプロパティを付与
  7. 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
  8. chatbox.inc Vue.js Progressive Framework Vue.js + Community Library 用途に応じて柔軟な構成を選択できる、ミニマム+リッチなJSフ レームワークの選択肢

  9. chatbox.inc @ionic/vue ionic が Vue.js をサポート ionic のコンポーネントが Vue.js で使える

  10. 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
  11. chatbox.inc Code with Kitchen Shink ModusCreateOrg/ionic-vue-examples

  12. chatbox.inc @ionic/vue でなにか作ってみよう! TODAY’S THEME!

  13. chatbox.inc 無謀なチャレンジ

  14. chatbox.inc chatbox-inc/gh-prune http://gh-prune.netlify.com

  15. 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
  16. chatbox.inc route import { IonicVueRouter } from '@modus/ionic-vue' const router

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

    要素の中に ion-vue-router を記述 VueRouter と同じ記述でルートの処理ができる
  18. 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 が使える
  19. chatbox.inc ion component は Shadow DOM Vue の検証機能にもヒットしない

  20. chatbox.inc Controller export default { methods: { async detail(){ //

    ... const alert = await this.$ionic.alertController.create(options) alert.present() } } } this.$ionic で 各種 controller にアクセス alert や loading, toast など
  21. 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 で動作させる
  22. chatbox.inc trouble #2 export default { mounted(){ setTimeout(async ()=>{ const

    loader = await this.$ionic.loadingController.create({...}) loader.present() },0) }, } mounted hook の中で controller の挙動がおかしい $nextTick ではなく setTimeout で解決可
  23. chatbox.inc @ionic/vue worked ! α version でも意外と色々いける! シンプルな アプリ作成にはとても便利 Capacitor

    を使ったビルドは未検証 …
  24. chatbox.inc Why Vue.js ? プレーンな HTML と ES Style の

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

  26. chatbox.inc Thanks!