Ionic/Vueで実機確認まで試してみる

タイトルの通り

前々からIonicに興味があったのですが、触ろう触ろうと思いつつも放置してました。
そんな折、IonicがVue.jsのサポートを始めたらしいので、試しに触った備忘録です。

プロジェクト作成

# プロジェクト作成
vue create ionic-vue

# Ionic/Vueのインストール
cd create ionic-vue
npm i @ionic/vue --save

# ioniconsのインストール
npm i ionicons@4.5.9-1 --save

ionicons を入れておかないと "export 'ICON_PATHS' was not found in 'ionicons/icons' というエラーになります。

参考 github.com

コード

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import Ionic from '@ionic/vue'
import '@ionic/core/css/ionic.bundle.css'

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

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

Home.vue

<template>
  <ion-app 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">
      <hr />
      <ion-button @click="onClick()" full>Go to About Page</ion-button>
    </ion-content>
  </ion-app>
</template>

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

現状、v-modelディレクティブはサポート外です。

The shorthand v-model binding is currently not supported

router.js

import Vue from 'vue'
import Home from './views/Home.vue'
import { IonicVueRouter } from '@ionic/vue'

Vue.use(IonicVueRouter)

export default new IonicVueRouter({
~中略（変更なし）~
})

VueRouter から IonicVueRouter へ変更します

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;
}
</style>

WEB画面の確認

なんだかそれっぽくなった気がする。。
f:id:massyuu-d:20190903235400p:plain

f:id:massyuu-d:20190903235324p:plain

エミュレーターの準備

Ionicの設定ファイルを作成する

# ionic.config.json が作成される
ionic init

command not found: ionic とエラーが出る場合は、Ionicをインストールする
※今回はローカルインストール

# ローカルインストールして
npm i ionic --save
# 再度設定ファイルを作成する
npx ionic init

次に Webとネイティブをブリッジするための ionic capacitor copy を実行しますが、その前にvueプロジェクトのビルドをしておく必要があります。

# dist へ出力
npm run build
# Webとネイティブをブリッジするためにコピー
npx ionic capacitor copy

エミュレーションするためのプラットフォームを追加します。
コマンドをみる限り、 iOS 、 Android 、 Electron が追加できるようです。

# 今回はiOS
cap add ios

この時、 cocoapods がインストールされていないとエラーになります。
cocoapods のインストールはこちらの記事を参考にさせていただきました。

qiita.com

www.project-unknown.jp

その後、以下のコマンドでXcodeが起動します。

npx cap open ios

僕はAppleのディベロッパライセンスを持っていないので、実機で確認することになります。
ここでXcodeのエラーがいっぱい・・以下のページを参考になんとか実機での確認までこぎつけました。

program-life.com

ninagreen.hatenablog.com

stackoverflow.com

とりあえず今日はここまで。

日々ろぐ

人に優しく٩( 'ω' )و