【Vue.js】Vuetify의 설치 방법과 기본적인 사용법

소개

Vue.js의 UI 컴포넌트 라이브러리인 Vuetify의 설치 방법과 대표적인 사용법을 정리했습니다.

공식 사이트 URL
↑ 완전하지는 않지만 일본어화도 진행되고 있습니다.
해설이나 데모가 각 컴퍼넌트마다 게재되고 있어, 보기 시작하면 멈추지 않습니다. 웃음

환경

OS: macOS Catalina 10.15.1
vue: 2.6.10
vue-cli: 4.1.1
vue-router: 2.6.10
vuex: 3.1.2
vuetify: 2.1.0

설치

※Vue-CLI로 Vue의 환경은 구축 완료로 합니다.

$ vue create my-app

↓

$ vue add vuetify

이것만으로 사용할 수있는 상태입니다.

※ CDN 버전도 있습니다.

1. 반응형 디자인 지정

xs~xl까지 5단계 준비되어 있습니다.


클래스의 끝에 none, flex로 숨기고, 표시를 지정할 수 있습니다.

모든 크기로 숨기기: d-none

Small 이상이라면 표시: d-sm-flex

됩니다.

이것을 결합하면
스마트 폰에서는 숨기고 PC라면 표시하고 싶은 요소라면,

<div class="d-none d-sm-flex">
  ...
</div>

이렇게하면 괜찮습니다.

그 외 반응형 관련의 자세한 것은 이쪽으로.
CSS Display helpers — Vuetify.js

2. 컬러

일반 #FFEBEE과 같은 색상 코드 사양 외에도,red lighten-5 같이 쓸 수 있습니다.

구체적인 색조는 아래 링크에서 확인 가능합니다.
Material color palette — Vuetify.js

3.UI component

사용 예: 드롭다운 메뉴

각 컴퍼넌트는 v-〇〇 로 명명되어 있어 그것들을 중첩해 좋아하는 형태로 조립해 갑니다.

예를 들면, 이하의 <v-menu> 안을 쓰는 것으로, CSS·JavaScript를 일절 쓰지 않고 드롭다운 메뉴를 구현 할 수 버립니다.

편해!

↓공식의 데모는 이쪽
App-bar component — Vuetify.js

sample.vue

<template>
<v-bar>
...
<v-menu
  left
  bottom
>
  <template v-slot:activator="{ on }">
    <v-btn icon v-on="on">
      <v-icon>mdi-dots-vertical</v-icon>
    </v-btn>
  </template>

  <v-list>
    <v-list-item
      v-for="n in 5"
      :key="n"
      @click="() => {}"
    >
      <v-list-item-title>Option {{ n }}</v-list-item-title>
    </v-list-item>
  </v-list>
</v-menu>
</v-bar>
...
</template>

4.Directives

사용 예 : Intersection observer도 간단하게 사용할 수 있습니다

v-intersect라는 지시문을 사용하여 스크롤하여 지정된 범위에 들어가면 클래스를 부여하는 것도 쉽게 구현할 수 있습니다.

다음 예에서는 <v-card> 요소가 화면 범위 내에 들어오면 <v-avatar> 색상이 변경됩니다.

편해!

↓공식의 데모는 이쪽
Intersection observer directive — Vuetify.js

sample.vue

<template>
  <div>
    <div>
      <v-avatar
        :color="isIntersecting ? 'success' : 'error'"
      ></v-avatar>
    </div>
    <v-card
      v-intersect="onIntersect"
    >
      ...
    </v-card>
  </div>
</template>

<script>
  export default {
    data: () => ({
      isIntersecting: false,
    }),

    methods: {
      onIntersect (entries, observer) {
        this.isIntersecting = entries[0].isIntersecting
      },
    },
  }
</script>

결론

끝까지 읽어 주셔서 감사합니다

그 외, 지정할 수 있는 스타일이나 사용할 수 있는 UI 컴퍼넌트가 다수 갖추어져 불편하지 않을 것 같습니다.
좋은 디자인을 너무 쉽게 구현할 수 있기 때문에 깜짝

참고로 한 사이트 (항상 감사합니다)

머티리얼 디자인 컴포넌트 프레임워크 — Vuetify.js