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

Vuetifyで、いわゆるカードCardというものを表示します。

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

Vue.js用マテリアルデザインフレームワークVuetify

01.CodeSandboxのVue.jsでVuetify

02.codesandboxのvue.jsでvuetifyのテンプレート

03.codesandbox上でVue.js-VuetifyでCard

04.CodeSandboxでVuetifyを用いたフォーム作成

05.Vuetifyでheaderヘッダーとfooterフッター

06.vuetifyでアイコンを利用

パソコン(WindowsでもMacでも同じですが、私はWindows10 Proを使用）
Chrome

今回利用する環境

CodeSandbox
Vue 2.5.2
Vuetify 1.3.15

• https://codesandbox.io/へ行き、画面右上の、『Create Sandbox』をクリック

• Vue　をクリック

• 以下のような画面になります。

• CSSフレームワークとして、Vuetifyを用いるために、以下のように、Add Dependencyをクリック

• Vuetify と入力して、Vuetifyをクリックして、インストール

• 以下のようになります

• 次に、vuetifyとfirebaseを利用できるようにするために、index.htmlとsrc/main.jsを編集します。

src/App.vueを以下のように変更して、ヘッダーheader、フッターfooterとカードcardを表示します。

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