差分

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

--- 00.vue用デザインフレームワークvuetify:05.vuetifyでheaderヘッダーとfooterフッター [2019/01/29] – [Vue Routerのインストール] adash333
+++ 00.vue用デザインフレームワークvuetify:05.vuetifyでheaderヘッダーとfooterフッター [2019/04/30] (現在) – [レスポンシブtoolbarとfooter] adash333
@@ 行 53: / 行 53: @@
-途中。
 ===== Vuetifyでレスポンシブなヘッダー（toolbar）その2 =====
@@ 行 63: / 行 60: @@
 {{:00.vue用デザインフレームワークvuetify:pasted:20190129-044719.png}}
+これから作るもの
+ソースコード
+https://github.com/adash333/Vue_Vuetify_Layout_baseline
+DEMO
+https://codesandbox.io/s/o4k30zkm0y
+{{:00.vue用デザインフレームワークvuetify:pasted:20190129-200457.png}}
 ==== CodeSandboxのVue.jsアプリ上でVuetifyを利用できるための準備 ====
@@ 行 128: / 行 131: @@
 ==== src/components/Home.vueとContact.vueの作成と、router.jsの変更 ====
-{{:00.vue用デザインフレームワークvuetify:pasted:20190129-072531.png}}
+{{:00.vue用デザインフレームワークvuetify:pasted:20190129-185654.png}}
+{{:00.vue用デザインフレームワークvuetify:pasted:20190129-185707.png}}
+src/router.js
+<code>
+import Vue from "vue";
+import VueRouter from "vue-router";
+// ルート用のコンポーネントを読み込む
+import Home from "./components/Home.vue";
+import Contact from "./components/Contact.vue";
+//プラグインとして登録
+Vue.use(VueRouter);
+// VueRouterインスタンスを生成
+const router = new VueRouter({
+  // URLのパスと紐づくコンポーネントをマッピング
+  routes: [
+    { path: "/", component: Home },
+    { path: "/Contact", component: Contact }
+  ]
+});
+// 生成したVueRouterインスタンスをエクスポート
+export default router;
+// 参考：基礎から学ぶVue.js
+// https://cr-vue.mio3io.com/
+</code>
+{{:00.vue用デザインフレームワークvuetify:pasted:20190129-185725.png}}
+==== Vue.jsにMaterial Design Iconを導入 ====
+Material IconsとMaterial Design Iconsは別物らしく、公式サイトにmdi-codepenと記載されているアイコンは、Material Design Iconsだそうなのですが、そのままでは表示されません。
+https://vuetifyjs.com/ja/framework/iconsを見て、Material Design Iconsをインストールしようとしましたが、私の実力ではうまくいきませんでした。（かなりググったのですが、Vuetifyで、デフォルトのMaterial Iconsに加えて、Material Design Iconsを同時に使用する方法が分かりませんでした。）仕方がないので、vue-material-design-iconsを使用してみたいと思います。
+  -Add Dependencyからvue-material-design-iconsをインストール
+  -src/main.jsの変更
+  -src/App.vueでimport
+src/main.js
+<code>
+import "vue-material-design-icons/styles.css"
+</code>
+{{:00.vue用デザインフレームワークvuetify:pasted:20190129-185145.png}}
+src/App.vue
+<code>
+// template内
+<codepen-icon />
+// script内
+import CodepenIcon from "vue-material-design-icons/Codepen.vue"
+components: {
+  CodepenIcon
+}
+</code>
+{{:00.vue用デザインフレームワークvuetify:pasted:20190129-194314.png}}
+{{:00.vue用デザインフレームワークvuetify:pasted:20190129-194529.png}}
+少しだけsrc/App.vueを変更
+{{:00.vue用デザインフレームワークvuetify:pasted:20190129-200312.png}}
+参考：https://www.npmjs.com/package/vue-material-design-icons
+アイコンのリスト：https://materialdesignicons.com/
+Importするときの名前の付け方は、以下を参考。
+{{:00.vue用デザインフレームワークvuetify:pasted:20190129-193928.png}}
+アイコンの大きさなどの変更の仕方がよくわからなかったので、今回は、なんと<h1>で囲んていますが、明らかにやり方間違っています。。。デモキニシナイ、、、
+ソースコード
+https://github.com/adash333/Vue_Vuetify_Layout_baseline
+DEMO
+https://codesandbox.io/s/o4k30zkm0y
+{{:00.vue用デザインフレームワークvuetify:pasted:20190129-200457.png}}
+===== Vuetifyでレスポンシブなヘッダー（toolbar）その3 =====
+以下のコードをCodeSandboxで写経してみたいと思います。
+https://codepen.io/atgarbett/pen/QOZoyg
+これから作るもの
+ソースコード
+DEMO
-{{:00.vue用デザインフレームワークvuetify:pasted:20190129-072544.png}}
-{{:00.vue用デザインフレームワークvuetify:pasted:20190129-072516.png}}