Vue.js 入門 (7) - Veutify

「Veutify」の使い方をまとめました。

前回

1. Veutify

「Vuetify」は、「Vue.js」で使えるマテリアルデザインのUIフレームワークです。

Vuetify — A Material Design Framework for Vue.js

2. Vue CLIによるインストール

「Vue CLI」によるインストール手順は、次のとおりです。

(1) 以下のコマンドで、Vueのプロジェクトを作成。

$ vue create my-app
$ cd my-app

(2) 以下のコマンドで、「Vuetify」をインストール。

$ vue add vuetify

(3) プロセットを聞かれたら、Defaultを選択。

? Choose a preset:
❯ Default (recommended)
  Prototype (rapid development)
  Configure (advanced)

(4) プロジェクトの実行。

$ yarm run serve

(5) ブラウザで「http://localhost:8080/」を開く。
「Welcome to Vuetify」のページが表示されます。

3. 使用可能なコンポーネント

使用可能なコンポーネントは、公式サイトで確認できます。

ボタン・コンポーネント

4. コンポーネントの利用

コンポーネントの使用手順は、次のとおりです。

(1) 公式サイトで使用したいUIを探して、コードをコピー。
コードは<>をクリックで表示されます。

今回はドロイドくんボタンをコピペしました。

コピー内容は、次のとおりです。

<v-btn
 class="mx-2"
 fab
 dark
 large
 color="purple"
>
 <v-icon dark>
   mdi-android
 </v-icon>
</v-btn>

(2) テンプレートに貼り付け。
ボタンなので、イベント「v-on:click="onClick"」も追加して、押下できることを確認します。

<template>
  <v-btn
    v-on:click="onClick"
    class="mx-2"
    fab
    dark
    large
    color="purple"
  >
    <v-icon dark>
      mdi-android
    </v-icon>
  </v-btn>
</template>

<script>
  export default {
    name: 'HelloWorld',
    methods: {
      onClick: function() {
        console.log("ボタンを押しました。")
      }
    }
  }
</script>

実行結果は、次のとおりです。