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

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

ユーザ用ツール

サイト用ツール


サイドバー

目次

サルでもわかる機械学習

sidebar

00.vue用デザインフレームワークvuetify:03.codesandboxvuetifyでcard


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

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

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

メニュー

開発環境

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

今回利用する環境

CodeSandbox
Vue 2.5.2
Vuetify 1.3.15

今回作成するもの

1. CodeSandbox上で、Vue.jsアプリを新規作成

  • Vue をクリック

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

2. Vuetifyのインストールとindex.htmlの編集

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

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

  • 以下のようになります

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

3. src/App.vueの編集

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

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


00.vue用デザインフレームワークvuetify/03.codesandboxvuetifyでcard.txt · 最終更新: 2019/01/28 by adash333