===== 03.codesandbox上でVue.js-VuetifyでCard =====
Vuetifyで、いわゆるカードCardというものを表示します。

公式サイト：https://vuetifyjs.com/ja/components/cards
===== メニュー =====

[[00.vue用デザインフレームワークvuetify:index.html|Vue.js用マテリアルデザインフレームワークVuetify]]

[[00.vue用デザインフレームワークvuetify:01.codesandboxのvue.jsでvuetify|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でアイコンを利用]]


===== 開発環境 =====
<code>
パソコン(WindowsでもMacでも同じですが、私はWindows10 Proを使用）
Chrome
</code>
今回利用する環境
<code>
CodeSandbox
Vue 2.5.2
Vuetify 1.3.15
</code>
===== 今回作成するもの =====
{{:00.vue用デザインフレームワークvuetify:pasted:20181220-222656.png}}
==== 1. CodeSandbox上で、Vue.jsアプリを新規作成 ====
  *https://codesandbox.io/へ行き、画面右上の、『Create Sandbox』をクリック
{{:09.emailとpasswordでパスワード制限:pasted:20181219-171907.png}}
  *Vue　をクリック
{{:09.emailとpasswordでパスワード制限:pasted:20181219-171955.png}}
  *以下のような画面になります。
{{:09.emailとpasswordでパスワード制限:pasted:20181219-172514.png}}

==== 2. Vuetifyのインストールとindex.htmlの編集 ====
  *CSSフレームワークとして、Vuetifyを用いるために、以下のように、Add Dependencyをクリック
{{:09.emailとpasswordでパスワード制限:pasted:20181219-173748.png}}
  *Vuetify と入力して、Vuetifyをクリックして、インストール
{{:09.emailとpasswordでパスワード制限:pasted:20181219-173833.png}}
  *以下のようになります
{{:09.emailとpasswordでパスワード制限:pasted:20181219-173914.png}}
  *次に、vuetifyとfirebaseを利用できるようにするために、index.htmlとsrc/main.jsを編集します。

<html>
<script src="https://gist.github.com/adash333/8dda68b30f2ba68e23aa73a249184550.js"></script>
</html>

==== 3. src/App.vueの編集 ====
src/App.vueを以下のように変更して、ヘッダーheader、フッターfooterとカードcardを表示します。
<html>
<script src="https://gist.github.com/adash333/9ce50ce8af30f0a214f2372820da1c13.js"></script>
</html>
{{:09.emailとpasswordでパスワード制限:pasted:20181220-221651.png}}

公式サイト：https://vuetifyjs.com/ja/components/cards