差分

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

--- 00.vue用デザインフレームワークvuetify:index.html [2018/12/17] – [index.htmlとsrc/App.vueの編集] adash333
+++ 00.vue用デザインフレームワークvuetify:index.html [2019/03/08] (現在) – [index.htmlを編集] adash333
@@ 行 4: / 行 4: @@
 Googleのサイトのような味気ないデザインになってしまいますが、Google検索すると、テンプレートが豊富に出てくるので、『派手じゃないけどカッコよくデザインしたい！』という方に非常にお勧めです。
+ただし、画像のリンクの設定については紛らわしいので<wrap hi>[[00.vue用デザインフレームワークvuetify:06.vuetifyで画像表示のリンクの注意点|こちら]]</wrap>をご覧ください。
 https://vuetifyjs.com/ja/
 {{:00.vue用デザインフレームワークvuetify:pasted:20181217-212530.png}}
+===== メニュー =====
+[[01.CodeSandboxのVue.jsでVuetify]]
+[[00.vue用デザインフレームワークvuetify:02.codesandboxのvue.jsでvuetifyテンプレート|02.codesandboxのvue.jsでvuetifyのテンプレート]]
+[[00.vue用デザインフレームワークvuetify:03.codesandboxvuetifyでcard|03.codesandbox上でVue.js-VuetifyでCard]]
+[[00.vue用デザインフレームワークvuetify:04.vuetifyでformフォーム|04.CodeSandboxでVuetifyを用いたフォーム作成]]
+[[00.vue用デザインフレームワークvuetify:05.vuetifyでheaderヘッダーとfooterフッター|05.Vuetifyでheaderヘッダーとfooterフッター]]
+[[00.vue用デザインフレームワークvuetify:06.vuetifyでアイコンを利用|06.vuetifyでアイコンを利用]]
+日付を選択datepicker
 ===== 開発環境 =====
 <code>
@@ 行 15: / 行 36: @@
 CodeSandboxでやってみます。
-今回は、https://sitest.jp/blog/?p=11329を写経してみたいと思います。
+ローカルパソコンで、Vue.js(Version2, Version3で多少導入方法が異なるようです)に対してVuetifyを使用する方法については、[[https://qiita.com/reflet/items/88dc298c8887ad517845|Vuetifyをインストールして使ってみる(2018年10月11日に更新@reflet)]]が分かりやすいです。
-===== CodeSandboxで新規Vue.jsアプリを作成 =====
+===== CodeSandboxで新規アプリを作成 =====
   *https://codesandbox.io/へ行って、画面右上の『Create Sandbox』をクリック
 {{:00.vue用デザインフレームワークvuetify:pasted:20181217-210013.png}}
-  *Vue　をクリック
+  *Vanilla　をクリック
-{{:00.vue用デザインフレームワークvuetify:pasted:20181217-210123.png}}
+{{:00.vue用デザインフレームワークvuetify:pasted:20181217-221431.png}}
   *すると、以下のような画面になります。
-{{:00.vue用デザインフレームワークvuetify:pasted:20181217-210159.png}}
+{{:00.vue用デザインフレームワークvuetify:pasted:20181217-221505.png}}
-===== index.htmlとsrc/App.vueの編集 =====
+===== index.htmlを編集 =====
-Vuetify公式サイトの「CDNを利用」のところのサンプルコードの一部をコピーします。
+index.htmlを、以下のように書き換えます。
-https://vuetifyjs.com/ja/getting-started/quick-start#cdn-install
-{{:00.vue用デザインフレームワークvuetify:pasted:20181217-212819.png}}
-index.htmlと、src/App.vueを、以下のように書き換えます。
 <html>
@@ 行 42: / 行 58: @@
-作成中
+すると、以下のようになります。
+{{:00.vue用デザインフレームワークvuetify:pasted:20190308-193750.png}}
+参考：https://vuetifyjs.com/ja/getting-started/quick-start
+https://vuetifyjs.com/ja/examples/layouts/baseline
 ===== メニュー =====
-[[01.index.html一つでVuetify]]
+[[01.CodeSandboxのVue.jsでVuetify]]
-[[02.ヘッダーとフッター]]
+[[00.vue用デザインフレームワークvuetify:index.html|Vue.js用マテリアルデザインフレームワークVuetify(ヘッダーとフッター)]]
-[[03.コンテイナーとカード]]
+[[00.vue用デザインフレームワークvuetify:03.codesandboxvuetifyでcard|03.codesandbox上でVue.js-VuetifyでCard]]
-[[04.ボタン]]
+[[00.vue用デザインフレームワークvuetify:04.vuetifyでformフォーム|04.CodeSandboxでVuetifyを用いたフォーム作成]]
-[[05.フォーム]]
+[[00.vue用デザインフレームワークvuetify:05.vuetifyでheaderヘッダーとfooterフッター|05.Vuetifyでheaderヘッダーとfooterフッター]]
-[[06.日付を選択datepicker]]
+[[00.vue用デザインフレームワークvuetify:06.vuetifyでアイコンを利用|06.vuetifyでアイコンを利用]]
+日付を選択datepicker
 ===== 写経元サイト =====
@@ 行 66: / 行 92: @@
 Vuetify.js を使ってマテリアルデザインに挑戦しよう！
 年7月12日
+https://windii.jp/nuxt/vuetify-tutorial/amp
+Vuetifyチュートリアル。CSSを書かないマテリアルデザイン
 https://sugimotonote.com/2018/04/04/post-997/
@@ 行 76: / 行 105: @@
 Vuetifyをインストールして使ってみる
+https://windii.jp/frontend/nuxt/vuetify-tutorial
+/11/11
+Vuetifyチュートリアル。CSSを書かないマテリアルデザイン
+→わかりやすい！写経してみたいです。
+http://dokechin.hatenablog.com/entry/2018/03/19/080210
+-03-19
+Vuetify.jsでかっこいいWebトップ画面を作りたい
+→ img のリンクの注意点