ionic4:ionic-vue

差分

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

この比較画面へのリンク

--- ionic4:ionic-vue [2019/04/29] – [src/router.jsとsrc/App.vueの変更] adash333
+++ ionic4:ionic-vue [2019/04/30] – [vue-routerリンク] adash333
@@ 行 1: / 行 1: @@
 ====== Vue.jsでIonic（@ionic/vue） ======
-Ionicは、スマホアプリ（PWAを含む）作成のためのJavascriptフレームワークです。Ionic3まではAngular専用でしたが、Inoic4から、素のJavascript(Vanilla)、ReactとVueにも対応する予定だそうです。
+Ionicは、スマホアプリ（PWAを含む）作成のためのJavascriptフレームワークです。Ionic3まではAngular専用でしたが、Ionic4から、素のJavascript(Vanilla)、ReactとVueにも対応する予定だそうです。
 年4月現在、@ionic/vueはbeta版です。まだ、beta版ということもあり、<wrap hi><wrap em>v-modelが使用できないそうです。</wrap></wrap>（残念、、、）
@@ 行 106: / 行 106: @@
 <code>
-yarn serve
+yarn serve  //または、npm run serve
 </code>
@@ 行 236: / 行 236: @@
 {{:ionic4:pasted:20190429-101604.png}}
+===== src/views/Home.vueとAbout.vueの変更 =====
-題名と画像を<div text-center></div>で囲む。
+題名と画像が左寄せになってしまったので、"%%<div text-center></div>%%"で囲んで水平方向真ん中に配置します。
-src/Home.vueの変更
+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>
+</code>
@@ 行 300: / 行 324: @@
 今さら聞けない？Vue Router
+===== ionicのcardのリンク =====
+年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.txt · 最終更新: 2020/12/03 by adash333