Vue-CLI3から始めるUIフレームワーク 〜Vuetify〜

2019.07.19

 

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

 

1
$ vue add vuetify

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

 

1
2
3
4
5
6
7
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

 

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

 

1
2
3
4
? Choose a preset: (Use arrow keys)
❯ Default (recommended)
  Prototype (rapid development)
  Configure (advanced)

 

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

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
   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.

 

 

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

 

 

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
<!-- ↓下1行が重要 -->
  <v-app>
    <v-toolbar app>
      <v-toolbar-title class="headline text-uppercase">
        <span>Vuetify</span>
        <span class="font-weight-light">MATERIAL DESIGN</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn
       flat
       href="https://github.com/vuetifyjs/vuetify/releases/latest"
       target="_blank"
     >
        <span class="mr-2">Latest Release</span>
      </v-btn>
    </v-toolbar>

    <v-content>
      <HelloWorld/>
    </v-content>
  </v-app>
</template>

 

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

 

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

 

 

まとめ

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

     

     

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


Top