Vuetifyの基本的な使い方とよく使いそうなところのドキュメントのメモ

#Vuetifyとは
公式ページ

Vue.jsのマテリアルデザイン用のフレームワークです。React.jsのMATERIAL-UIのVueバージョンと言ったところです。

Vuetifyを使用する最大のメリットはCSSを書かなくても、整ったUIを作成することができるということです。

#Vuetifyの導入

VueCLIはインストール済を想定してます。

//プロジェクトの作成
$ vue create my-app //「my-app」は何でもいいここの名前でプロジェクトが作成される

//vuetifyの追加
$ vue add vuetify

Nuxt.jsなどで導入するときはこちらを参考

#サンプル

##画面

##コード

Home.vue

<template>
  <div class="home">
    <h1>HomePage</h1>
    //v-btnでボタンが作れる
    //classにpinkをあてることでピンク色に、white--textをあてることでテキストが白に
    <v-btn class="pink white--text">click me</v-btn>
    //textをつけるで背景色と影がなくなる colorで色を指定
    <v-btn text color="pink">click me</v-btn>
    // depressedをつけることで影がなくなる
    <v-btn depressed class="pink white--text">
      //v-iconでアイコンをつける mdi-emailでemaiのアイコン
      <v-icon left>mdi-email</v-icon>
      <span>EMAIL ME</span>
    </v-btn>
    //fabをつけることで丸くできる
    <v-btn fab depressed small dark color="purple">
      //v-iconでアイコンをつける mdi-heartでハートのアイコン
      <v-icon>mdi-heart</v-icon>
    </v-btn>
  </div>
</template>

<script>

export default {
}
</script>

#勉強方法
チュートリアルをやるのが手っ取り早いです。

英語ですが、画面に映っている通りにやっていけば大体のことは理解できます。
また、画面通りにやって上手くいかない時には、コメントを見れば、解決できることが多いです。

#よく使うそうな部分のドキュメントメモ
下記は私がよく使いそうだと感じる部分のドキュメントのリンクのメモです。
大体は下記のドキュメント、サンプルコードを読むことで大体理解できるかなぁと思います。
Codepenへのリンクにとんで実際にコードをイジってみるのも面白いです。

色
https://vuetifyjs.com/ja/styles/colors/#colors

文字サイズ
https://vuetifyjs.com/ja/styles/typography/#font-sizes

ボタンとicon
https://vuetifyjs.com/ja/components/buttons/#buttons

フォーム
https://vuetifyjs.com/ja/components/forms/#forms

ファイルを使うフォーム
https://vuetifyjs.com/ja/components/file-inputs/#file-inputs

#使い勝手良さげ
自分の手でCSSを書かなくていい分、慣れれば工数を削減できる可能性高いなと思います。
かなり凝った表現が必要、とかでない限りはこういったフレームワークを使うのはアリなんじゃないかなぁと思います。