Vue + Ionic つまずかない環境構築

はじめに

環境構築でつまずいてしまったので、情報共有のために
2020/2/22現在の環境構築手順の解説をします

vueのプロジェクト作成

vue create {プロジェクト名}

typescriptを追加するとIonicとnamespaceがかぶるためなるべく選ばないが吉
それ以外はお好みで

作成したら

cd {プロジェクト名}

でディレクトリを移動

Ionicの追加

(1)~(4)の順番はどうでもいいです

vue add ionic
npm i @ionic/vue vue-router @capacitor/core @capacitor/cli ionicons@4.5.9-1

yarnよりnpmの方がいいらしいのでnpmで追加

(1) main.jsに追加

main.js

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import './plugins/ionic.js'
+ import Ionic from '@ionic/vue';

+ Vue.use(Ionic);
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

この二つをmain.jsに追加

(2) app.vue

app.vue

<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>

を追加
後述するがroutingもionic-vue-routerを使用するため変更

(3) Home.vueとAbout.vueを変更(確認のため)

Home.vue

<template>
  <div class="ion-page">
    <ion-header>
      <ion-toolbar>
        <ion-title>About Page</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" />
      <div>
        <ion-button @click="onClick()" full>Go to About Page</ion-button>
      </div>
    </ion-content>
  </div>
</template>

<script>
export default {
  name: "home",
  methods: {
    onClick () {
      this.$router.push('about')
    }
  }
}
</script>

About.vue

<template>
  <div class="about">
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>Hello World</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <h1>This is an about page</h1>
    </ion-content>
  </div>
</template>

(4) routerをionic-vue-routerに変更

router.js

import Vue from 'vue'
import Home from '../views/Home.vue'
import About from '../views/About.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: About
    }
  ]
})

開発用サーバーを立てる

npm run serve

するとerrorが出てしまう
Ionicのbugが原因らしい

詳しくはここで
bug: Ionic/vue ionicons error

バグを解決するために@Ionic/vueのバージョンを更新する

npm install @ionic/vue@0.0.9

すると解決して
無事構築完了

動きが気持ちいいね！！