Ionic x Vue.js でのハイブリッドアプリ環境構築

Ionic x Vue.jsの環境を作ります。
方法は大きく分けて2通りです。
・ionic init （ionicのCLIで作成する方法）
・vue create （vueのCLIで作成する方法）
今回はvue createを使って作成します。
※Yarnはセットアップ済みの前提

Vueのプロジェクトを作成する

vue create {プロジェクト名} // オプションはデフォルトでOK
cd {プロジェクト名}

この時点で vue serve を実行するとvueのアプリが起動します。

Ionicを導入する

ionicのモジュールを取得します。

yarn add @ionic/core @ionic/vue@0.0.9

vueのrouterモジュールを取得します。アプリライクな画面遷移に必要。

vue add router

main.jsで、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')

App.vueのHTMLを以下のように変更する。
具体的にはdiv id="app"の部分をion-appに変更します。

<template>
 <ion-app>
   <div id="nav">
     <router-link to="/">Home</router-link> |
     <router-link to="/about">About</router-link>
   </div>
   <router-view/>
 </ion-app>
</template>

この時点でyarn serveすると以下のようになります。

ionicのコンポーネントを使用してアプリライクにする

コンポーネントを参照して、以下のように修正します。
Home.vueを以下のように修正します。

<template>
 <ion-app class="ion-page">
   <ion-header>
     <ion-toolbar>
       <ion-title>Ionic Title</ion-title>
     </ion-toolbar>
   </ion-header>
   <ion-content class="ion-padding">
     <h1>Hello Ionic</h1>
     <img alt="Vue logo" src="../assets/logo.png">
   </ion-content>
 </ion-app>
</template>

<script>
export default {
 name: 'Home'
}
</script>

vue serve すると以下のように見えます。

まとめ

以上、ありがとうございます。