ichikawa

こんにちは！フロントエンドエンジニアの市川です。
今回は、Vue.jsのUIフレームワーク「Vuetify」の使い方についてご紹介したいと思います！

Vuetifyとは

Vuetifyとは、Vue.jsで使用できるマテリアルデザインのUIフレームワークです。
レイアウトを構築するグリッドシステムから、ボタンなどの細かいパーツまで幅広くUIを提供しています。
自分でCSSを書かなくてもマテリアルデザインのサイトが作れるのは、とても便利ですね…！
マテリアルデザインに準拠したアニメーションも完備されているのもありがたいです。

事前準備

今回は、Vue CLIを使ったインストール方法をご紹介します。（※Vue CLI以外のインストール方法は公式サイトを参照下さい） まず、Vue CLIを使ってVueのローカル環境を作ります。方法については、前回のブログでもご紹介しているので、宜しければご参照下さい。
Vue CLIを使ってVue.jsをはじめよう！

Vuetifyのインストール

Vue CLIの準備ができましたら、下記コマンドラインでVuetifyをインストールします。

vue add vuetify

インストール中にいくつか質問されますが、基本的にはDefaultの設定のままで良いかと思います。

インストールが終わったら、下記コマンドでローカルサーバを立ち上げます。（すでに立ち上げていた場合は、一度切って再度立ち上げ直して下さい。）

npm run serve

ローカル環境のトップ画面が下記のようになればインストール完了です🎉

使用例

Vuetifyで提供されているUIコンポーネントはたくさんあるので、よく使いそうなUIをピックアップしてご紹介したいと思います。
基本的な使い方としては、Vue.jsのコンポーネントを読み込むときと同様です。

ボタン

Buttons

タブ

Tabs

フォーム

Forms

アラート

Alerts

その他のUIコンポーネントについては、公式サイトのドキュメントを参照下さい！

おわりに

いかがでしたでしょうか。 Vuetifyなどのデザインフレームワークを使わずにスクラッチでデザインを構築する場合も、Vuetifyの命名規則や構成はとても参考になると思います！是非一度使ってみて下さい。
今回は以上になります。最後までお読み頂きありがとうございました！