===== Vue.js用マテリアルデザインフレームワークVuetify ===== WebアプリをVue.jsを用いて作成するのであれば、初心者にとっては、Vuetifyというマテリアルデザインフレームワークを使用するのが、楽だと思います。 Googleのサイトのような味気ないデザインになってしまいますが、Google検索すると、テンプレートが豊富に出てくるので、『派手じゃないけどカッコよくデザインしたい！』という方に非常にお勧めです。 ただし、画像のリンクの設定については紛らわしいので[[00.vue用デザインフレームワークvuetify:06.vuetifyで画像表示のリンクの注意点|こちら]]をご覧ください。 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 ===== 開発環境 ===== Windows 8.1 Pro (Macでも同じです) Chrome CodeSandboxでやってみます。 ローカルパソコンで、Vue.js(Version2, Version3で多少導入方法が異なるようです)に対してVuetifyを使用する方法については、[[https://qiita.com/reflet/items/88dc298c8887ad517845|Vuetifyをインストールして使ってみる(2018年10月11日に更新@reflet)]]が分かりやすいです。 ===== CodeSandboxで新規アプリを作成 ===== *https://codesandbox.io/へ行って、画面右上の『Create Sandbox』をクリック {{:00.vue用デザインフレームワークvuetify:pasted:20181217-210013.png}} *Vanilla　をクリック {{:00.vue用デザインフレームワークvuetify:pasted:20181217-221431.png}} *すると、以下のような画面になります。 {{:00.vue用デザインフレームワークvuetify:pasted:20181217-221505.png}} ===== index.htmlを編集 ===== index.htmlを、以下のように書き換えます。 すると、以下のようになります。 {{:00.vue用デザインフレームワークvuetify:pasted:20190308-193750.png}} 参考：https://vuetifyjs.com/ja/getting-started/quick-start https://vuetifyjs.com/ja/examples/layouts/baseline ===== メニュー ===== [[01.CodeSandboxのVue.jsでVuetify]] [[00.vue用デザインフレームワークvuetify:index.html|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 ===== 写経元サイト ===== https://sitest.jp/blog/?p=11329 {{:00.vue用デザインフレームワークvuetify:pasted:20181217-213602.png}} ===== 初めてのVuetifyのリンク ===== https://sitest.jp/blog/?p=11329 Vuetify.js を使ってマテリアルデザインに挑戦しよう！ 2017年7月12日 https://windii.jp/nuxt/vuetify-tutorial/amp Vuetifyチュートリアル。CSSを書かないマテリアルデザイン https://sugimotonote.com/2018/04/04/post-997/ Vue.js + vuetify + vue-cli でマテリアルデザインにトライ！ 2018/4/4 2018/10/6 https://qiita.com/reflet/items/88dc298c8887ad517845 @reflet 2018年10月11日に更新 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 のリンクの注意点