Dev

Vuetify에 대한 간략한 메모

January 20, 2019

Vuetify에 대한 간략한 메모

Vuetify에 대한 간략한 메모

Vuetify 사용법에 대한 간략한 정리하였다.

개인적으로 웹 기술을 공부하면서 가장 곤란한 상황은 CSS와 관련된 기술을 학습하는 것이다. 개인 프로젝트를 진행하면서 가장 어려운 부분이 레이아웃이나 기본적인 형태의 사용자 UI를 작성하는 방법이다. 평소에 Bootstrap을 사용했지만 이번에 Vue.js를 공부하면서 Material UI 기반의 Vuetify를 병행해서 같이 공부했다. 이 기사는 Vuetify를 공부하면서 기록했던 내용을 가볍게 정리한 기사이다.

설치

Vue.js를 사용할 때 @vue/cli를 사용한다. Vuetify는 수동 설치 방법이 있긴 하지만 개인적으로 해보니 @vue/cli을 사용해서 설치하는게 가장 편리했다. 수동으로 설치하게 되면 몇가지 자잘한 설정등을 해야되는 경우가 많았기 때문에 손쉽게 @vue/cli를 사용해서 설치하길 권장한다.

$ vue create sd-todo
$ cd sd-todo
$ vue add vuetify

// 전 아직 프론트엔드 관련 기술 꼬꼬마라서 `recommended`를 선택
? Choose a preset: (Use arrow keys)
❯ Default (recommended)
  Prototype (rapid development)
  Configure (advanced)

// recommended로 변경된 내용은 `git diff`로 확인 가능
✔  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.json
     public/index.html
     src/App.vue
     src/components/HelloWorld.vue
     src/main.js
     src/views/Home.vue
     yarn.lock

   You should review these changes with git diff and commit them.

$ git diff
diff --git a/package.json b/package.json
index 638ece5..fcbbff0 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "vue": "^2.5.21",
     "vue-router": "^3.0.1",
+    "vuetify": "^1.3.0",
     "vuex": "^3.0.1"
   },
   "devDependencies": {
@@ -26,6 +27,10 @@
     "eslint-plugin-vue": "^5.0.0",
     "node-sass": "^4.9.0",
     "sass-loader": "^7.0.1",
-    "vue-template-compiler": "^2.5.21"
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.1",

그리드 시스템

Vuetify는 12개를 컬럼을 사용한 그리드 시스템을 사용한다. 5가지 화면 크기에 따른 유형을 적용할 수 있다.

v-container는 전체 너비를 기준으로 화면에 출력될 컨테이너를 중앙에 배치한다. v-layout은 섹션을 구분하는데 사용하고 v-flex를 포함한다. 대부분의 경우 v-layoutrowcolumn을 주로 사용한다. v-flex의 내부에는 div 태그를 사용해서 필요한 내용을 추가한다.

기본적인 vuetify 예제

아래 예제는 vuetify에서 소개한 예제이다. 레이아웃 요소를 배치 할 땐 v-app 속성을 최상위에 사용해야 한다. v-content를 사용하면 구성 요소가 동적으로 조정된다.

<v-app>
  <v-navigation-drawer app></v-navigation-drawer>
  <v-toolbar app></v-toolbar>
  <v-content>
    <v-container fluid>
      <router-view></router-view>
    </v-container>
  </v-content>
  <v-footer app></v-footer>
</v-app>

Breakpoints

xs < sm < md <lg<xl` 순서로 적용된다. 화면 크기를 기준으로 적용된다.

Typography

일반적으로 가장 많이 사용하는 폰트 관련 내용이다. Vuetify는 Roboto Font를 사용한다. .display-4h1 태그에 적합하고, .titleh6에 잘 어울린다. .body-1은 일반적인 본문에 어울리고, 중요한 본문 내용은 .body-2를 사용한다. font-weight-{thin, light, regular, medium, bold, black}등을 사용하여 폰트를 설정할 수 있다. 색상의 경우 {배경 글자}형태로 구성되며, {배경색, 배경색 밝기, 글자, 글자색 밝기} 형태로 구성된다. 좀 더 자세한 내용은 Application typography — Vuetify.js를 참고하자.

<p class="red white--text">Eleates de ferox quadra, promissio onus!Cur elevatus studere?Cur abactus tolerare?Cum extum studere, omnes vitaes magicae pius, castus amores.Eheu, luna!</p>
<p class="pink lighten-4 red--text text--darken-4">Audax agripetas ducunt ad poeta.Nunquam imitari fluctui.Cobaltums sunt armariums de placidus poeta.Ubi est pius olla?Lanista experimentums, tanquam lotus hibrida.</p>
<h1 class="display-1">Brevis gallus hic imperiums racana est.</h1>
<h4 class="display-4">Nunquam attrahendam bulla.Caesium de bi-color lumen, resuscitabo parma!</h4>
<p class="headline">Fuga, axona, et mortem.Superbus mensa nunquam tractares tumultumque est.Heu.</p>
<p class="subheading font-weight-bold">Sunt plasmatores transferre salvus, emeritis mensaes.</p>
<p class="caption">Sunt rectores transferre castus, germanus fermiumes.</p>

Button and Icon

flat은 그림자와 배경이 없는 버튼을 생성하고, depressed는 그림자가 없으며, fab는 동그란 형태의 버튼을 생성한다. 대부분의 경우 아래 예제에서 손쉽게 사용할 수 있었으며, 좀 더 자세한 사항은 Button Component — Vuetify.js을 참고하자.

<v-btn class="pink white--text">Click ME</v-btn>
<v-btn depressed color="pink">Click ME</v-btn>
<v-btn flat color="blue">Click ME</v-btn>

<v-btn depressed class="pink white--text">
  <v-icon left>email</v-icon>
  <span>E-mail me</span>
</v-btn>

<v-btn depressed small class="pink white--text">
  <v-icon left small>email</v-icon>
  <span>E-mail me</span>
</v-btn>

<v-btn depressed large class="pink white--text">
  <span>E-mail me</span>
  <v-icon right small>email</v-icon>
</v-btn>

<v-btn depressed small dark class="purple">
  <v-icon>favorite</v-icon>
</v-btn>

<v-btn fab depressed small dark class="purple">
  <v-icon>favorite</v-icon>
</v-btn>

Visibility

뷰포트에 따라서 해당 요소를 출력하거나 숨길 수 있는 요소이다. only, and-down,and-up등으로 뷰포트 범위를 지정한다. 자세한 사항은 Display helpers — Vuetify.js를 참고하자.

<v-btn class="hidden-md-and-down">click me1</v-btn>
<v-btn class="hidden-md-and-up">click me2</v-btn>
<v-btn class="hidden-sm-only">click me3</v-btn>

Toolbar and Drawer

일반적으로 사이트를 탐색하는 가장 중요한 방법 중 하나인 ToolbarDrawer 사용법은 아래와 같다. Toolbars — Vuetify.js, Navigation drawer — Vuetify.js를 참고하자.

<template>
    <nav>
        <v-toolbar flat app>
            <v-toolbar-side-icon @click="drawer = !drawer" class="grey--text"></v-toolbar-side-icon>
            <v-toolbar-title class="text-uppercase grey--text">
                <span class="font-weight-light">Todo</span>
                <span>Ninja</span>
            </v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn flat color="grey">
                <span>Sign Out</span>
                <v-icon right>exit_to_app</v-icon>
            </v-btn>
        </v-toolbar>

        <v-navigation-drawer app v-model="drawer" class="indigo">
            <p>test</p>
        </v-navigation-drawer>
    </nav>
</template>

<script>
    export default {
        data() {
            return {
                drawer: false
            }
        }
    }
</script>

Theme

theme는 색상을 쉽게 변경하는 방법을 제공한다. 자세한 사항은 Application theming — Vuetify.js를 참고하자.

Vue.use(Vuetify, {
  iconfont: 'md',
  theme: {
    primary: '#9652ff',
    success: '#3cd1c2',
    info: '#ffaa2c',
    error: '#f83e70'
  }
})

Lists

목차등의 정보를 표현하는데 사용한다. 리스트는 List Component — Vuetify.js를 참고하자

<v-list-tile v-for="link in links" :key="link.text" router :to="link.route">
    <v-list-tile-action>
        <v-icon class="white--text">{{ link.icon }}</v-icon>
    </v-list-tile-action>
    <v-list-tile-content>
        <v-list-tile-title class="white--text">{{ link.text }}</v-list-tile-title>
    </v-list-tile-content>
</v-list-tile>

Spacing

m은 margin, p는 padding을 뜻하며, x*-left, *-right이다. 아래 예제에서 4$spacer * 1.5 간격을 뜻 한다. 자세한 사항은 Spacing helpers — Vuetify.js을 참고하자.

<v-content class="mx-4 mb-4">
    <router-view></router-view>
</v-content>

Card

card 요소는 다양한 구성를 조합해서 사용할 수 있다. 기본적으로 v-card-media, v-card-title, v-card-text, v-card-actions으로 구성된다. Cards — Vuetify.js 링크에 있는 예제를 잘 활용하자.

<v-card flat class="text-xs-center ma-3">
    <v-responsive class="pt-4">
        image here
    </v-responsive>
    <v-card-text>
        <div class="subheading">{{ person.name }}</div>
        <div class="grey--text">{{ person.role }}</div>
    </v-card-text>
    <v-card-actions>
        <v-btn flat color="grey">
            <v-icon small left>message</v-icon>
            <span class="">Message</span>
        </v-btn>
    </v-card-actions>
</v-card>