====== Vue.jsでIonic（@ionic/vue） ======

→2020年10月 ionic-vueが正式対応したそうです。
https://i-doctor.sakura.ne.jp/font/?p=45127

Ionicは、スマホアプリ（PWAを含む）作成のためのJavascriptフレームワークです。Ionic3まではAngular専用でしたが、Ionic4から、素のJavascript(Vanilla)、ReactとVueにも対応する予定だそうです。

2019年4月現在、@ionic/vueはbeta版です。まだ、beta版ということもあり、<wrap hi><wrap em>v-modelが使用できないそうです。</wrap></wrap>（残念、、、）

https://blog.ionicframework.com/announcing-the-ionic-vue-beta/
{{:ionic4:pasted:20190429-004905.png}}

公式GitHub
https://github.com/ionic-team/ionic/tree/master/vue

公式Documentation
https://ionicframework.com/docs

上記Blogを写経してみたいと思います。

===== ソースコードとDEMOサイト =====
ソースコード
https://github.com/adash333/ionic4-vue-modal

DEMOサイト
https://compassionate-neumann-66e20f.netlify.com/

{{:ionic4:pasted:20190430-144410.png}}

===== 開発環境 =====

<code>
Windows10Pro 1803
nvm 1.1.7
node 10.15.1
npm 6.4.1
yarn 1.13.0
ionic 4.12.0

VisualStudioCode 1.33.1
</code>

今回構築した環境
<code>
vue/cli 3.7.0
</code>

→@vue/cliでvueアプリを作成した後に、@ionic/vueとvue-routerをインストールするだけなので、CodeSandboxでも可能かもしれません。






===== ionic-cliのupdate(install)と@vue/cliのインストール =====
C:/vue/　フォルダを作成し、VisualStudioCodeで開き、Ctrl+@でターミナル画面を開きます。

ionic-cliをインストール済みの場合は、以下を入力してupdateします。
<code>
npm update -g ionic
</code>
{{:ionic4:pasted:20190429-012958.png}}

ionic-cliをインストール未の場合は、以下を入力してインストールします。
<code>
npm install -g ionic
</code>

次に、@vue/cliをインストールします。
<code>
npm install -g @vue/cli
</code>

{{:ionic4:pasted:20190429-020421.png}}

===== 新規Vueアプリの作成 =====

<code>
vue create ionic4-vue-app
</code>

Use https://registry.npm.taobao.org for faster installation?
と聞かれるので、Y+Enter

画面が変わって、さらに2回何か聞かれるので、2回ともそのままEnter
数分待ちます。
{{:ionic4:pasted:20190429-021143.png}}

途中で以下のような感じのエラーが出ますが、待っていると、、、
{{:ionic4:pasted:20190429-021600.png}}
以下のように完了しました。割と時間がかかります。
{{:ionic4:pasted:20190429-021924.png}}

===== Vueアプリの起動 =====

<code>
cd ionic4-vue-app
yarn serve
</code>

{{:ionic4:pasted:20190429-022139.png}}

ブラウザで、http://localhost:8080/　を開くと、以下のようになっています。

{{:ionic4:pasted:20190429-024550.png}}

サーバを停止するときは、ターミナル画面で、Ctrl+C => y + Enterとなります。
===== vue-routerと、@ionic/vueの追加 =====

<code>
vue add router
yarn add @ionic/vue  //または、npm install @ionic/vue
</code>

{{:ionic4:pasted:20190429-025001.png}}

{{:ionic4:pasted:20190429-025236.png}}

<code>
yarn serve  //または、npm run serve
</code>

{{:ionic4:pasted:20190429-030744.png}}

===== src/main.jsの変更 =====
src/main.jsで、@ionic/vueとionic用のcssを読みこみます。

<code>
import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);
</code>

（変更前）
{{:ionic4:pasted:20190429-095306.png}}

（変更後）
{{:ionic4:pasted:20190429-095636.png}}

変更して保存したら、自動更新に60秒くらいかかりました。








===== src/views/Home.vueの変更 =====

以下に書き換えます。

<router-link to="/about">は使用できるかな？

<code>
<template>
  <div class="ion-page">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title slot="start">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">
      <router-link to="/about">
        <ion-button color="primary" expand="full">About</ion-button>
      </router-link>
    </ion-content>
  </div>
</template>

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

</code>

参考：https://ionicframework.com/docs/api/button

（変更前）
{{:ionic4:pasted:20190429-095911.png}}

（変更後）
{{:ionic4:pasted:20190429-100541.png}}
ボタンの部分をクリックすると、Aboutページへ移動します。
{{:ionic4:pasted:20190429-100609.png}}

<router-link to="/about"></router-link>は普通に使用できるようです。














===== src/router.jsとsrc/App.vueの変更 =====
上記のままでもなんかよさそうな気がしなくもないのですが、ionicをちゃんと利用できるようにするためには、以下の設定を行わなければならないそうです。

src/router.jsを編集して、<wrap hi>vue-routerのRouter</wrap>ではなく、<wrap hi>@ionic/vueのIonicVueRouter</wrap>を用いるように設定します。

<code>
import { IonicVueRouter } from '@ionic/vue';

Vue.use(IonicVueRouter);

export default new IonicVueRouter({

...

});
</code>

（変更前）
{{:ionic4:pasted:20190429-101132.png}}

（変更後）
{{:ionic4:pasted:20190429-101346.png}}

また、それに応じて、src/App.vueにおいて、<wrap hi><router-view /></wrap>を<wrap hi><ion-vue-router /></wrap>に変更します。

<ion-vue-router />の部分が、src/router.jsで設定したコンポーネント（Home.vueやAbout.viewなど）で置き換えられることになります。

<code>
<template>
  <div id="app">
    <ion-app>
      <ion-vue-router />
    </ion-app>
  </div>
</template>
</code>

（変更前）
{{:ionic4:pasted:20190429-101441.png}}

（変更後）
{{:ionic4:pasted:20190429-101604.png}}

===== src/views/Home.vueとAbout.vueの変更(ion-buttonとion-card) =====

題名と画像が左寄せになってしまったので、"%%<div text-center></div>%%"で囲んで水平方向真ん中に配置します。

src/views/Home.vueの変更

<code>
      <div text-center>
        <h1>Welcome To @ionic/vue</h1>
        <img alt="Vue logo" src="../assets/logo.png">
      </div>
</code>

{{:ionic4:pasted:20190430-130944.png}}

Aboutページでは、Ionicのcardを使ってみたいと思います。

参考：https://ionicframework.com/docs/api/card

参考2：https://ionicframework.com/docs/v3/components/#card-image

https://ionicframework.com/docs/demos/api/card/madison.jpg から、madison.jpgをダウンロードして、%%src/assets/%%に保存します。

src/views/About.vue

<code>
<template>
  <div class="ion-page">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Hello World</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <div text-center>
        <h1>This is an about page</h1>
      </div>
      <router-link to="/">
        <ion-button color="secondary" expand="full">Home</ion-button>
      </router-link>
      <ion-card>
        <img alt="madison.jpg" src="../assets/madison.jpg">
        <ion-card-header>
          <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
          <ion-card-title>Card Title</ion-card-title>
        </ion-card-header>

        <ion-card-content>
          Keep close to Nature's heart... and break clear away, once in awhile,
          and climb a mountain or spend a week in the woods. Wash your spirit clean.
        </ion-card-content>
      </ion-card>

      <ion-card>
        <ion-item href="#">
          <ion-icon name="wifi" slot="start"></ion-icon>
          <ion-label>Card Link Item 1</ion-label>
        </ion-item>

        <ion-item href="#">
          <ion-icon name="wine" slot="start"></ion-icon>
          <ion-label>Card Link Item 2</ion-label>
        </ion-item>

        <ion-item>
          <ion-icon name="warning" slot="start"></ion-icon>
          <ion-label>Card Button Item 1</ion-label>
        </ion-item>

        <ion-item>
          <ion-icon name="walk" slot="start"></ion-icon>
          <ion-label>Card Button Item 2</ion-label>
        </ion-item>
      </ion-card>
    </ion-content>
  </div>
</template>

<script>
export default {
  name: "about"
};
</script>
</code>

{{:ionic4:pasted:20190430-134025.png}}

画像つきカードCardを作成することができました。

===== ion-modalを試してみる =====
modalという、リンクをクリックすると一時的に出てくる画面を試してみます。

src/views/Modal.vueを新規作成し、
src/views/About.vueに"Open Modal"ボタンを設置し、そのボタンをクリックすると、Modal.vueが表示されるようにします。

参考：https://ionicframework.com/docs/api/modal
{{:ionic4:pasted:20190430-134513.png}}

src/views/Modal.vueを新規作成
<code>
<template>
  <div>
    <ion-header>
      <ion-toolbar>
        <ion-title>{{ title }}</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content padding>
      {{ content }}
    </ion-content>
  </div>
</template>

<script>
export default {
  name: 'Modal',
  props: {
    title: { type: String, default: 'Super Modal' },
  },
  data() {
    return {
      content: 'Content',
    }
  },
}
</script>
</code>
{{:ionic4:pasted:20190430-134720.png}}

src/views/About.vue
<code>
// <template>内に、
<div text-center>
  <ion-button color="success" fill="outline" @click="openModal">Open Modal</ion-button>
</div>

// <script>内は、以下のように
<script>
import Modal from './modal.vue'

export default {
  name: "about",
  methods: {
    openModal() {
      return this.$ionic.modalController
        .create({
          component: Modal,
          componentProps: {
            data: {
              content: 'New Content',
            },
            propsData: {
              title: 'New title',
            },
          },
        })
        .then(m => m.present())
    },
  },
}
</script>

</code>

{{:ionic4:pasted:20190430-141043.png}}

{{:ionic4:pasted:20190430-141132.png}}

{{:ionic4:pasted:20190430-141155.png}}

Modal画面は開くことはできたが、Modal画面からAbout画面に戻ることができない。。。

==== Modal画面を閉じるボタンの実装（$ionic.modalController.dismiss()） ====
Modal画面を閉じるボタンを設置する場合は、Modal.vueの<template>内に%%@click="closeModal"%%のようにcloseModal関数を記載し、<script>内にmethodsでcloseModal()関数を定義します。

src/views/Modal.vue
<code>
// <template>内に以下を記載
      <div text-center>
        <ion-button @click="closeModal">close modal</ion-button>
      </div>

// <script>内に以下を記載
  methods: {
    closeModal() {
      return this.$ionic.modalController.dismiss();
    }
  }
</code>

{{:ionic4:pasted:20190430-142909.png}}

{{:ionic4:pasted:20190430-142948.png}}

{{:ionic4:pasted:20190430-143008.png}}

これで、Modal画面の作成と、Modal画面を閉じるボタンの実装を行うことができました。

===== ソースコードとDEMOサイト =====
ソースコード
https://github.com/adash333/ionic4-vue-modal

DEMOサイト
https://compassionate-neumann-66e20f.netlify.com/

{{:ionic4:pasted:20190430-144410.png}}

{{:ionic4:pasted:20190430-144428.png}}

{{:ionic4:pasted:20190430-144515.png}}

{{:ionic4:pasted:20190430-144529.png}}

























===== @ionic/vueリンク =====


https://qiita.com/chan_kaku/items/bb894774c64c1f2fdd9b
@chan_kaku
2019年04月28日に更新
ionic/vueもβ版になったので触ってみた

https://qiita.com/chan_kaku/items/f8c0dd2a39ff6f67c65b
@chan_kaku
2018年12月26日に更新
Ionic Vueでネイティブアプリを作る


https://dev.to/paulhalliday/ionic-4-angular-vue-js-and-react-1o14
Ionic 4: Angular, Vue.js and React
paulhalliday
2019 Mar 27 
→@ionic/vueがalpha版の頃の解説なので、@ionic/coreのインストールが必要になっているようです。

https://www.techiediaries.com/ionic-vue/
onic 4 Tutorial with Vue
20180215






===== vue-routerリンク =====

https://qiita.com/hshota28/items/765cf903f055754f7557
@hshota28
2019年02月25日に更新
今さら聞けない？Vue Router

===== ionicのcardのリンク =====
2019年4月現在、IonicのDocumentは、Version3の方が見やすいです。[[http://i-doctor.sakura.ne.jp/dokuwiki/doku.php/ionic4%E3%81%A7%E3%81%AE%E5%A4%89%E6%9B%B4%E7%82%B9|Ionic4とIonic3の違い]]は多少ありますが、Cardなどは、Ionic3のDocumentの方が分かりやすいです。

https://ionicframework.com/docs/v3/components/#cards
{{:ionic4:pasted:20190430-133408.png}}

https://ionicframework.com/docs/api/card
{{:ionic4:pasted:20190430-133445.png}}















===== リンク =====