Vuetifyを試してみた
目次
Vuetifyとは
使用方法・コンポーネント紹介
Vuetifyとは
Vueをベースに構築されたUIフレームワーク
Googleが提唱しているマテリアルデザインの考えに乗っ取って構築された直感的なコンポーネントを手軽に扱える
IE11対応
どういった場合と相性が良いのか
管理画面UI
業務で使用するwebアプリ
フロントエンジニアにデザインがぶん投げられた時（デザイナさんがアサインされていない場合）
著者が使った感想
cssとは考え方が違うので最初は戸惑う
css：デザインからスタイル
Vuetify：必要な要素から必要なコンポーネントを選ぶ
記述量減
コンセプト通り直感的にUIデザイン可能
マークアップやった事なくても、なんとなくで出来る気がする
👍👎 なんかいい感じにできちゃう！
コンポーネント・スタイル紹介
コンポーネント
https://reffect.co.jp/wp-content/uploads/2019/09/vue_dashbord-layout.png
大体こんな構成
<v-app>
code: APP.vue
<template>
<v-app>
## Vuetifyのコンポーネントは全てここに記述
</v-app>
</template>
※ Vuetifyコンポーネントは全て先頭に v- がつきます
tj.icon
<v-app> のスタイルには VSCode サポートが弱いですね。
何か利用やすい plugin がありますか？
ナビゲーションバー・タイトル表示の為のタグ <v-app-bar> <v-toolbar-title> を追加
code: APP.vue
<template>
<v-app>
<v-app-bar>
<v-toolbar-title>Vuetify</v-toolbar-title>
</v-app-bar>
</v-app>
</template>
https://reffect.co.jp/wp-content/uploads/2019/09/vuetify-2-3.png
propsを定義する事でスタイルを変更する
code: APP.vue
<v-app-bar color="primary" dark app>
dark: テーマを設定（default: light）darkは画面全体がグレーになり、文字が白色になる
https://reffect.co.jp/wp-content/uploads/2019/09/vuetify-2-2.png
appを設定するとナビゲーションバーの高さを自動調整してくれる
colorを設定するとテーマの色を上書き
https://reffect.co.jp/wp-content/uploads/2019/09/vuetify-5-3.png
コンポーネントには初めからスタイルが適用されている
<v-footer> なら position: absolute
👍 propsを設定しなくてもそこそこのUIが実装可能
tj.icon customize 簡単ですか？
code:theme
// 一般的に書き方
const theme = { height: 24px };
useTheme(theme)
tj.icon 見つけた
スタイル
アメリカのデザイナ（強いデザイナ？）：８px区切りが鉄板
研究で８px区切りが良いと証明されてる
tj.icon 👍
onuma.icon スペースやフォントサイズの指定を数学の理論を使って定義しようとした人がいましたね
s: start
e: end
最近人気らしい
Grid
Vuetify２系からGridシステムが一新
１系： <v-layout> <v-flex>
２系： <v-low> <v-col>
https://i0.wp.com/blog.proglearn.com/wp-content/uploads/2019/08/image-11.png?resize=1024%2C627&ssl=1
イメージ図
v-container：サイトコンテンツを中央寄せ + 自動でパディング
v-row：行（row）を定義 + 自動でパディング
v-col：列（column）を定義
区切り方はv-colの数によって自動調整
colsプロパティで区切り方を指定することも可能
https://i0.wp.com/blog.proglearn.com/wp-content/uploads/2019/08/image-13.png?resize=1024%2C227&ssl=1
code: template
<v-row
class="mb-6"
no-gutters
<v-col
v-for="n in 3"
:key="n"
:cols="n === 2 ? 6 : undefined"
<v-card
class="pa-2"
outlined
tile
{{ n }} of 3 {{ n === 2 ? '(wider)' : '' }}
</v-card>
</v-col>
</v-row>
二つ目の列にv-rowの 6/12 のサイズを使用し、残りは自動調整
👍 １系と比較し直感的にわかりやすくなっている
👎 そもそもスタイルの項目だったので（今はコンポーネント）混乱した
皆さんの意見
tj.icon 管理画面なら、使います。
tj.icon エンドユーザ使う画面、使いません。
tj.icon UI framework 便利点は
特別 Inputを提供済、Date-picker など
input validaion 完璧
layout すぐ使う
tamuraryoya.icon そもそも Vuetify のLPとかサイトとかが Vuetify でできているのか謎
ueyama
ROBOTO と マテリアルアイコンがセットになっていて片方だけを用いることが難しかった記憶があります．
ROBOTO の読み込みが初回ロード時に行われるので，代替フォントを .v-application で指定するか，ROBOTOの読み込みを任意の箇所まで遅らせるかなど，エンドユーザーに提供する場合は考慮するべき点がありました．
管理画面などレイアウトがある程度決まっている場合はすごく使いやすいです．（独自のCSSを用いる場合，vuetify があてたクラスと競合したり一見わかりにくいネストが作られていて相性が悪いと感じました）
参考