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

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

# vueのプロジェクト作成

```vuejs
vue create {プロジェクト名}
```

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

作成したら

```
cd {プロジェクト名}
```
でディレクトリを移動
<br>

# 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>
```
<ion-app>を追加
後述するが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
    }
  ]
})
```

<br>
## 開発用サーバーを立てる
```zsh
npm run serve
```

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

詳しくはここで
[bug: Ionic/vue ionicons error](https://github.com/ionic-team/ionic/issues/18640)

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

```
npm install @ionic/vue@0.0.9
```

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

![Feb-22-2020 18-03-56.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/382669/464a3701-bc16-49ed-f19d-7e40b1deb7da.gif)


動きが気持ちいいね！！