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

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

ユーザ用ツール

サイト用ツール


00.vue用デザインフレームワークvuetify:index.html


差分

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

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
00.vue用デザインフレームワークvuetify:index.html [2018/12/17]
adash333 [index.htmlとsrc/App.vueの編集]
00.vue用デザインフレームワークvuetify:index.html [2019/03/08] (現在)
adash333 [index.htmlを編集]
行 4: 行 4:
  
 Googleのサイトのような味気ないデザインになってしまいますが、Google検索すると、テンプレートが豊富に出てくるので、『派手じゃないけどカッコよくデザインしたい!』という方に非常にお勧めです。 Googleのサイトのような味気ないデザインになってしまいますが、Google検索すると、テンプレートが豊富に出てくるので、『派手じゃないけどカッコよくデザインしたい!』という方に非常にお勧めです。
 +
 +ただし、画像のリンクの設定については紛らわしいので<wrap hi>[[00.vue用デザインフレームワークvuetify:06.vuetifyで画像表示のリンクの注意点|こちら]]</wrap>をご覧ください。
  
 https://vuetifyjs.com/ja/ https://vuetifyjs.com/ja/
 {{:00.vue用デザインフレームワークvuetify:pasted:20181217-212530.png}} {{: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> <code>
行 15: 行 36:
 CodeSandboxでやってみます。 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』をクリック   *https://codesandbox.io/へ行って、画面右上の『Create Sandbox』をクリック
 {{:00.vue用デザインフレームワークvuetify:pasted:20181217-210013.png}} {{: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> <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 を使ってマテリアルデザインに挑戦しよう! Vuetify.js を使ってマテリアルデザインに挑戦しよう!
 2017年7月12日 2017年7月12日
 +
 +https://windii.jp/nuxt/vuetify-tutorial/amp
 +Vuetifyチュートリアル。CSSを書かないマテリアルデザイン
  
 https://sugimotonote.com/2018/04/04/post-997/ https://sugimotonote.com/2018/04/04/post-997/
行 76: 行 105:
 Vuetifyをインストールして使ってみる Vuetifyをインストールして使ってみる
  
 +https://windii.jp/frontend/nuxt/vuetify-tutorial
 +2018/11/11
 +Vuetifyチュートリアル。CSSを書かないマテリアルデザイン
 +→わかりやすい!写経してみたいです。
 +
 +http://dokechin.hatenablog.com/entry/2018/03/19/080210
 +2018-03-19
 +Vuetify.jsでかっこいいWebトップ画面を作りたい
 +→ img のリンクの注意点
  
  


00.vue用デザインフレームワークvuetify/index.html.1545050900.txt.gz · 最終更新: 2018/12/17 by adash333