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>
テキストとカラー
ボタンとアイコン
ブレイクポイント
ツールバー
ナビゲーションバー
テーマ
リスト
マージンとパディング
グリッドシステム
チップス
カード
アバター
エクステンションパネル
メニュー
ポップアウト
ベーシックフォーム
デートピッカー
バリデーション(フォーム)
firebase( データベース)
ボタンローダー
ポップアップ
まとめ
vuetifyってなんでも出来るな....