Ionic Vue事始め

Ionic Vueを触り始めてみました。
まだ何を作るか考えてませんが、自分用のメモとしてつらつら書いていきます。(頑張って続けます!)
この記事では、インストールとページ作成とモーダル作成をします。

インストール

(yarnを使う場合が多いですが、ここではnpmを使います)
まずは、Vue CLIのインストール

npm install -g @vue/cli

Vue CLIを用いてプロジェクトを作成します。

vue create ionic-vue-app

(Vue CLI UIを用いる方法もありますが、Vue CLI UIはよく知らないのでスルーします)

Ionic VueはVue-Routerを用いるので、Routerを追加します。

vue add router

これだけで、関連するソースコードがRouterを用いたものに変更されます。

あとは、@ionic/vueをインストールします

npm install @ionic/vue

自分の環境ではserve時にexport ‘ICON_PATHS’ was not found in ‘ionicons/icons’が出て、うまく動かなかったのでioniconsを追加します。
(バージョンを適宜調べて変えてください)

npm install ionicons@4.5.9-1 --save-dev

以上で、インストールは終了です

Ionic/Vue導入

インストールはしましたが、まだVueのままです。
Ionicを使えるようにするために、src/main.jsへプラグインを追加します。
(Vue.use()はVueのプラグインを使用する方法です。)

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/views/Home.vueもionic-appを用いたものに変えます。

<template>
  <div class="ion-page">
    <ion-header>
      <ion-toolbar>
        <ion-title>Hello World</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <h1>Welcome To @ionic/vue</h1>
      <img alt="Vue logo" src="../assets/logo.png">
    </ion-content>
  </div>
</template>

<script>
export default {
  name: "home",
};
</script>

これでserveすれば、恐らく動きます。
インストールの最後で書いたioniconsがないwarningが出ている場合、もしかしたらなにも無いページが表示されるかもしれません。(私の環境ではなにも無いページが出てきて時間を浪費しました)
serveすると、デフォルトでhttp://localhost:8080/が立ち上がり、以下のIonicのようでIonic感がない画面が表示されると思います。

ページ作成

ここまでで、ルートページだけを表示できるようにしました。
次はRouterをいじって、他のページも表示できるようにします。

src/router.jsを書き換えます。
src/main.jsと同様にVue.useを用いて、VueRouterをIonic向けにカスタムされた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',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

次に、src/App.vueも書き換えます。
ion-vue-routeは、IonicVueRouterのコンポーネント？です。

<template>
  <div id="app">
    <ion-app>
      <ion-vue-router />
    </ion-app>
  </div>
</template>
 
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

これで、とりあえず動くようにはなったので、遷移ボタンを追加して遷移させます。

<ion-content class="ion-padding">
  <h1>Welcome To @ionic/vue</h1>
  <img alt="Vue logo" src="../assets/logo.png">
  <ion-button @click="aboutPush()" full>Go to About Page</ion-button>
</ion-content>

methodsにページ遷移用の関数を定義します。

methods: {
    aboutPush() {
        this.$router.push('about')
  },
}

遷移後のページ(About.vue)を作成します。

<template>
  <div class="about">
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>About Page</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <h1>About Pageです</h1>
    </ion-content>
  </div>
</template>

<script>
export default {
  name: "About",
}
</script>

これで、ページ遷移もできました。
APIはこちら => ion-nav - Ionic Documentation

モーダル作成

ページ作成ができたので、これがあればアプリっぽく見える(と思っている)モーダル作成をします。
前回と同様に、モーダル作成ボタンを作り、関数を定義します。
($ionicはionicのアラートやモーダルなどのコントローラーを提供します。)

<template>
  <div class="ion-page">
    <ion-header>
      <ion-toolbar>
        <ion-title>Hello World</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <h1>Welcome To @ionic/vue</h1>
      <img alt="Vue logo" src="../assets/logo.png">
      <ion-button @click="aboutPush()" full>Go to About Page</ion-button>
      <ion-button @click="showModal()" full>Go to Modal</ion-button>
    </ion-content>
  </div>
</template>

<script>
import Modal from '../components/Modal';

export default {
  name: "home",
  methods: {
    aboutPush() {
      this.$router.push('about')
    },
    showModal: async function() {
      const modal = await this.$ionic.modalController.create({
        component: Modal,
        componentProps: {
          data: {
            content: 'New Content',
          },
          propsData: {
            title: 'New title',
            msg: Math.round(Math.random() * 100)
          }
        }
      });
      await modal.present();
    }
  }
};
</script>

モーダル(Modal.vue)を追加します。

<template>
  <div>
    <ion-header>
        <ion-toolbar>
            <ion-title>{{ title }} </ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content padding>
        {{ content }}
        {{ msg }}<br>
        <ion-button @click="dissmissModal()" full>bask to Modal</ion-button>
    </ion-content>
  </div>
</template>

<script>
export default {
    name: 'Modal',
    props: {
        title: { type: String, default: 'Super Modal'},
        msg: { type: Number, default: 0},
    },
    data() {
        return {
            content: "Content"
        }
    },
    methods: {
        dissmissModal() {
            this.$ionic.modalController.dismiss();
        }
    }
}
</script>

APIはこちら => ion-modal - Ionic Documentation

Vueユーザーの人も是非

Vueの手軽さはそのままに、モバイルに特化したコンポーネントを簡単に使用することができるので、ぜひVueを使ってる人も使ってみてください!!!

(thx: 添削してくれた友人たち)

リポジトリ

github.com