ユーザ用ツール

サイト用ツール


ionic4:ionic-vue

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
ionic4:ionic-vue [2019/04/29] – [@ionic/vueリンク] adash333ionic4:ionic-vue [2020/12/03] (現在) – [Vue.jsでIonic(@ionic/vue)] adash333
行 1: 行 1:
 ====== Vue.jsでIonic(@ionic/vue) ====== ====== Vue.jsでIonic(@ionic/vue) ======
  
-Ionicは、スマホアプリ(PWAを含む)作成のためのJavascriptフレームワークです。Ionic3まではAngular専用でした、Inoic4から、素のJavascript(Vanilla)、ReactとVueにも対応する予定だそうです。+→2020年10月 ionic-vue正式対応したそうです。 
 +https://i-doctor.sakura.ne.jp/font/?p=45127
  
-2019年4月現在、@ionic/vueはbeta版です。+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/ https://blog.ionicframework.com/announcing-the-ionic-vue-beta/
行 11: 行 14:
 https://github.com/ionic-team/ionic/tree/master/vue https://github.com/ionic-team/ionic/tree/master/vue
  
-公式Documentは、2019年4月現在、Vueのマークはありますが、まだ対応していません。)+公式Documentation 
 +https://ionicframework.com/docs
  
 上記Blogを写経してみたいと思います。 上記Blogを写経してみたいと思います。
 +
 +===== ソースコードとDEMOサイト =====
 +ソースコード
 +https://github.com/adash333/ionic4-vue-modal
 +
 +DEMOサイト
 +https://compassionate-neumann-66e20f.netlify.com/
 +
 +{{:ionic4:pasted:20190430-144410.png}}
  
 ===== 開発環境 ===== ===== 開発環境 =====
行 32: 行 45:
 vue/cli 3.7.0 vue/cli 3.7.0
 </code> </code>
 +
 +→@vue/cliでvueアプリを作成した後に、@ionic/vueとvue-routerをインストールするだけなので、CodeSandboxでも可能かもしれません。
 +
 +
 +
 +
 +
 +
 ===== ionic-cliのupdate(install)と@vue/cliのインストール ===== ===== ionic-cliのupdate(install)と@vue/cliのインストール =====
 C:/vue/ フォルダを作成し、VisualStudioCodeで開き、Ctrl+@でターミナル画面を開きます。 C:/vue/ フォルダを作成し、VisualStudioCodeで開き、Ctrl+@でターミナル画面を開きます。
行 97: 行 118:
  
 <code> <code>
-yarn serve+yarn serve  //または、npm run serve
 </code> </code>
  
行 111: 行 132:
 Vue.use(Ionic); Vue.use(Ionic);
 </code> </code>
 +
 +(変更前)
 +{{:ionic4:pasted:20190429-095306.png}}
 +
 +(変更後)
 +{{:ionic4:pasted:20190429-095636.png}}
 +
 +変更して保存したら、自動更新に60秒くらいかかりました。
 +
 +
 +
 +
 +
 +
  
  
行 116: 行 151:
  
 以下に書き換えます。 以下に書き換えます。
 +
 +<router-link to="/about">は使用できるかな?
  
 <code> <code>
行 121: 行 158:
   <div class="ion-page">   <div class="ion-page">
     <ion-header>     <ion-header>
-      <ion-toolbar> +      <ion-toolbar color="primary"
-        <ion-title>Hello World</ion-title>+        <ion-title slot="start">Hello World</ion-title>
       </ion-toolbar>       </ion-toolbar>
     </ion-header>     </ion-header>
行 128: 行 165:
       <h1>Welcome To @ionic/vue</h1>       <h1>Welcome To @ionic/vue</h1>
       <img alt="Vue logo" src="../assets/logo.png">       <img alt="Vue logo" src="../assets/logo.png">
-      <ion-button color="primary" +      <router-link to="/about"> 
-expand="full" fill="outline">Ionic Button</ion-button>+        <ion-button color="primary" expand="full">About</ion-button
 +      </router-link>
     </ion-content>     </ion-content>
   </div>   </div>
行 143: 行 181:
  
 参考:https://ionicframework.com/docs/api/button 参考: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>は普通に使用できるようです。
 +
 +
 +
 +
  
  
行 154: 行 206:
  
 ===== src/router.jsとsrc/App.vueの変更 ===== ===== src/router.jsとsrc/App.vueの変更 =====
 +上記のままでもなんかよさそうな気がしなくもないのですが、ionicをちゃんと利用できるようにするためには、以下の設定を行わなければならないそうです。
 +
 src/router.jsを編集して、<wrap hi>vue-routerのRouter</wrap>ではなく、<wrap hi>@ionic/vueのIonicVueRouter</wrap>を用いるように設定します。 src/router.jsを編集して、<wrap hi>vue-routerのRouter</wrap>ではなく、<wrap hi>@ionic/vueのIonicVueRouter</wrap>を用いるように設定します。
  
行 167: 行 221:
 }); });
 </code> </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>に変更します。 また、それに応じて、src/App.vueにおいて、<wrap hi><router-view /></wrap>を<wrap hi><ion-vue-router /></wrap>に変更します。
  
-<ion-vue-router />の部分が、src/router.jsで設定したビュー(Home.vueやAbout.viewなど)で置き換えられるとになります。+<ion-vue-router />の部分が、src/router.jsで設定したコンポネント(Home.vueやAbout.viewなど)で置き換えられるとになります。
  
 <code> <code>
行 181: 行 241:
 </template> </template>
 </code> </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}}
 +
  
  
行 224: 行 504:
 2019 Mar 27  2019 Mar 27 
 →@ionic/vueがalpha版の頃の解説なので、@ionic/coreのインストールが必要になっているようです。 →@ionic/vueがalpha版の頃の解説なので、@ionic/coreのインストールが必要になっているようです。
 +
 +https://www.techiediaries.com/ionic-vue/
 +onic 4 Tutorial with Vue
 +20180215
 +
 +
 +
 +
 +
  
 ===== vue-routerリンク ===== ===== vue-routerリンク =====
行 232: 行 521:
 今さら聞けない?Vue Router 今さら聞けない?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}}
  
  

ionic4/ionic-vue.1556520483.txt.gz · 最終更新: 2019/04/29 by adash333

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki