Vuetify란?

Vue.js의 UI 라이브러리입니다. Google이 제창한 머티리얼 디자인에 따라 직관적이고 사용하기 쉬운 구성 요소를 활용할 수 있습니다.

디자인 지식이 전혀 없어도 쉽게 UI를 만들 수 있습니다 🤗

프로젝트 만들기

먼저 평소대로 vue create로 프로젝트를 만듭니다.

vue create vuetify-project

이번에는 기본적으로 프로젝트를 만듭니다.

Vue CLI v4.2.2
? Please pick a preset: default (babel, eslint)

🎉  Successfully created project vuetify-project.
👉  Get started with the following commands:

 $ cd vuetify-project
 $ npm run serve

vuetify 설치

프로젝트 작성이 완료되면 프로젝트 디렉토리로 이동하여 vuetify를 설치합니다.

cd vuetify-project

vue add vuetify

사전 설정 선택을 듣지만 여기도 기본값을 선택합니다.

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

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
 vuetify  Discord community: https://community.vuetifyjs.com
 vuetify  Github: https://github.com/vuetifyjs/vuetify
 vuetify  Support Vuetify: https://github.com/sponsors/johnleider

설치가 완료되었습니다 👏
서버를 시작해 봅시다.

npm run serve

평소와 다른 느낌의 표시가 되었습니다 🥰

실제로 사용해보기

설치가 완료되었으므로 실제로 사용합시다!
기본적인 사용법은, v- 라고 하는 전치사가 붙은 컴퍼넌트를 조합해 갑니다.

사용 가능한 모든 구성 요소는 공식 문서에서 확인할 수 있습니다.
놀라울 정도로 종류가 많습니다. 😮

우선 회전 목마를 설치합시다!

우선 공식 문서에서 회전 목마의 페이지를 찾아 옵니다.



왼쪽의 사이드 메뉴에서 찾을 수도 있고 페이지를 검색할 수도 있습니다.
각 구성 요소의 페이지에서 이미지와 사용법을 확인할 수 있습니다.

구성 요소를 구현하는 가장 빠른 방법은 copipe입니다! (웃음)
공식 샘플 오른쪽 상단의 소스 코드 아이콘을 클릭하면 코드가 표시되므로 그것을 복사하면 완성입니다!






그리고 API를 보고 props를 자신의 취향에 조정하거나 컴포넌트를 조합하면 누구나 쉽게 세련된 화면을 만들 수 있습니다 🎉

우선 이런 느낌으로

App.vue

<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    />
    <v-card
      max-width="400"
      class="mx-auto my-auto"
      hover
    >
      <v-carousel
        cycle
        height="400"
        hide-delimiter-background
        show-arrows-on-hover
      >
        <v-carousel-item
          v-for="(slide, i) in slides"
          :key="i"
        >
          <v-sheet
            :color="colors[i]"
            height="100%"
          >
            <v-row
              class="fill-height"
              align="center"
              justify="center"
            >
              <div class="display-3">{{ slide }} Slide</div>
            </v-row>
          </v-sheet>
        </v-carousel-item>
      </v-carousel>
      <v-card-title>My Carousel</v-card-title>
      <v-card-subtitle class="font-italic font-weight-black">John</v-card-subtitle>
      <v-avatar class="mx-6">
        <img
          src="https://cdn.vuetifyjs.com/images/john.jpg"
          alt="John"
        >
      </v-avatar>
      <v-card-text>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</v-card-text>
    </v-card>
  </v-app>
</template>

<script>
  export default {
    data () {
      return {
        colors: [
          'indigo',
          'warning',
          'pink darken-2',
          'red lighten-1',
          'deep-purple accent-4',
        ],
        slides: [
          'First',
          'Second',
          'Third',
          'Fourth',
          'Fifth',
        ],
      }
    },
  }
</script>