みなさん、こんにちわ。むつたくです。
最近、サマータイムを導入させて貰い、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を導入しましょう。

 

[cc_bash]
$ vue add vuetify
[/cc_bash]

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

 

[cc_bash]
Installing vue-cli-plugin-vuetify…

+ vue-cli-plugin-vuetify@0.5.0
added 1 package from 1 contributor and audited 27647 packages in 10.158s
found 0 vulnerabilities

Successfully installed plugin: vue-cli-plugin-vuetify
[/cc_bash]

 

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

 

[cc_bash]
? Choose a preset: (Use arrow keys)
❯ Default (recommended)
Prototype (rapid development)
Configure (advanced)[/cc_bash]

 

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

 

[cc_bash]
Invoking generator for vue-cli-plugin-vuetify…
Installing additional dependencies…

added 11 packages from 49 contributors and audited 27685 packages in 12.077s
found 0 vulnerabilities

Running completion hooks…

Successfully invoked generator for plugin: vue-cli-plugin-vuetify
The following files have been updated / added:

src/assets/logo.svg
src/plugins/vuetify.js
package-lock.json
package.json
public/index.html
src/App.vue
src/components/HelloWorld.vue
src/main.js
src/views/Home.vue

You should review these changes with git diff and commit them.
[/cc_bash]

 

 

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

 

 

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

[cc_html]

[/cc_html]

 

これを記載することにより、その範囲で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ライフを！
それでは、また次回に！