サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


00.vue用デザインフレームワークvuetify:05.vuetifyでheaderヘッダーとfooterフッター


差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
00.vue用デザインフレームワークvuetify:05.vuetifyでheaderヘッダーとfooterフッター [2019/01/29] – [Vue Routerのインストール] adash33300.vue用デザインフレームワークvuetify:05.vuetifyでheaderヘッダーとfooterフッター [2019/04/30] (現在) – [レスポンシブtoolbarとfooter] adash333
行 53: 行 53:
  
  
- 
- 
-途中。 
  
 ===== Vuetifyでレスポンシブなヘッダー(toolbar)その2 ===== ===== Vuetifyでレスポンシブなヘッダー(toolbar)その2 =====
行 63: 行 60:
 {{:00.vue用デザインフレームワークvuetify:pasted:20190129-044719.png}} {{: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を利用できるための準備 ==== ==== CodeSandboxのVue.jsアプリ上でVuetifyを利用できるための準備 ====
  
行 128: 行 131:
  
 ==== src/components/Home.vueとContact.vueの作成と、router.jsの変更 ==== ==== 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}} 
  
  


00.vue用デザインフレームワークvuetify/05.vuetifyでheaderヘッダーとfooterフッター.1548746746.txt.gz · 最終更新: 2019/01/29 by adash333

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki