世界一適当な技術ブログ

日々学んだ内容をブログ形式でアウトプットします。基本自分用備忘録なので内容に責任は負いません(笑)

Vuetifyの基礎

Vuetifyの基礎

そういえば、Vuetifyについて学んだことなかったので、YouTubeで勉強する。

what is Vuetify

UIコンポーネント
Google Material Designをベースに作られている
Vue.jsに特化して作られている

導入

Vuetifyをインストールすると以下のようなファイルが出来る

  
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
  iconfont: 'md',
})

v-app

<template>
  <v-app> <--- rootコンポーネント

    <v-content>
      <router-view></router-view>
    </v-content>
    
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      
    }
  }
}
</script>

テキストとカラー

www.youtube.com

ボタンとアイコン

www.youtube.com

ブレイクポイント

www.youtube.com

ツールバー

www.youtube.com

ナビゲーションバー

www.youtube.com

テーマ

www.youtube.com

リスト

www.youtube.com

マージンとパディング

www.youtube.com

グリッドシステム

www.youtube.com

www.youtube.com

チップス

www.youtube.com

カード

www.youtube.com

アバター

www.youtube.com

エクステンションパネル

www.youtube.com

メニュー

www.youtube.com

ポップアウト

www.youtube.com

ベーシックフォーム

www.youtube.com

デートピッカー

www.youtube.com

バリデーション(フォーム)

www.youtube.com

firebase( データベース)

www.youtube.com

www.youtube.com

ボタンローダー

www.youtube.com

ポップアップ

www.youtube.com

まとめ

vuetifyってなんでも出来るな....