みなさん、こんにちわ。むつたくです。
最近、サマータイムを導入させて貰い、7:00出社、16:00退社をしています。
スワロー、なんて良い会社なんだ！
頑張ってイクメンしてます。お転婆長女の相手は毎回息があがります…。

さて、今回は非デザイナに送る、エンジニアのための記事になります。
Vue.jsのUIフレームワーク「Vuetify」の基本について書いていきますね。
ちなみにベースは、vue-cli3です。

むつたくはデザインセンスが皆無で、UIを作成するのは苦手です。
Vuetify万歳！！！

やること

1. Vuetifyについて
2. Vuetifyの基本

(1)Vuetifyについて

Vuetifyとは、Vue.jsで使用できるマテリアルデザインのフレームワークです。
マテリアルの様々なデザインがデフォルトで備わっているので、CSSを書かずにUIを構築できます。
書かずに済む…と言うことで、開発効率化にも貢献すると思います。

Vuetifyがオススメな理由ですが、

1. Googleが推薦するデザイン手法に準拠している
2. 豊富なコンポーネント数(100種類近くはある?)
3. SSRやSPA、標準HTMLをサポート

が挙げられます。

対応ブラウザですが、公式ページに記載されてます。

下記のブラウザはサポートされてます。
　　Chrome / Firefox / Edge / Safari10+

下記のブラウザはポリフィル使用でサポートされてます。
　　IE11 / Safari9

それ以外のブラウザはサポートされてませんので、注意してください。

(2) Vuetifyの基本

まず、vue-cli3の導入からですが、導入方法は下記のブログを参照してください。
第一回 – Vue.jsをインストールして実際に触れてみよう！

vue-cli3のインストールが済みましたら、次はVuetifyですね。
早速Vuetifyを導入しましょう。

そうしますと、「vue-cli-plugin-vuetify」のインストールが実行されます。

こんな感じのが表示されると、インストール完了です。
そのまま、Vuetifyの設定へ移行します

プリセットですが、公式でDefaultが推奨されてますので、このまま選択しましょう。
はい、これで設定完了ですw

再度、$ npm run serveを実行して、localhost:8080を開くと、以下のようなページになってるはずです。

ソースコードが色々変更されていますが、重要なのはApp.jsに追加されたv-appタグです

これを記載することにより、その範囲でVuetifyを使用するよ！と宣言しています。
上の例では、３〜２２行の間でVuetifyを使用できます。もちろん、その間にコンポーネントが定義されていれば、そのコンポーネントでもVuetifyが使用できます。
あとは、Vuetifyのコンポーネントを使用して、UIを構築してくいく…と言う感じになります。

使いたいコンポーネントは公式ページを参照してください。きっと見つかります。

まとめ

1. Vuetifyは、Vue.jsのUIフレームワーク
2. Vuetifyを使用する時は、$ vue add vuetifyを実行することで、導入できる。
3. プリセットは、なるべく公式推奨のDefaultを使用する
4. Vuetifyのコンポーネントを使用する時は、v-appタグで囲む。アプリ全体に使用する場合は、App.jsに記載。
   そうすれば、それぞれのコンポーネントでv-appタグを記載しなくても、使用できる。

 

 

 

快適なVue.js、Vuetifyライフを！
それでは、また次回に！