Vuetify とは Vue.js のUIライブラリで、簡単にモダンなUIを作成することができます。
今回はvuetifyを使用する方法を説明します。
公式によれば
「Vuetify は、デザインスキルを必要としない、美しく手作りされた Vue コンポーネントを備えたオープンソース UI ライブラリです」
とのこと。
Vuetify — A Vue Component Framework
Vuetify is a no design skills required Open Source UI Component Framework for Vue. It provides you with all of the t...
vuetifyjs.com
npmでインストールする場合は、以下のコマンドでvuetifyのインストールができる
npm install vuetify
Vue CLI を使用している場合は、以下のコマンドでインストールできる
vue add vuetify※このコマンドは既存のvueプロジェクトを上書きするので、使用の際は注意
※vueコマンドについては下記の記事に記載
機能紹介
UI components
様々なコンポーネント（テンプレート）があるので、一覧表を作りたいときなども簡単に実装できる！
Data table component — Vuetify
The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes so...
vuetifyjs.com
css style
スタイルも数多く準備されている！ボーダーをはじめ、文字サイズからflex表示まで！
Borders — Vuetify
Use border utilities to quickly style the border of any element.
vuetifyjs.com
color
好みの色を探して使える！
Material color palette — Vuetify
Learn about the colors of Material Design. Consume the javascript color pack directly in your application.
vuetifyjs.com
コメント