[Vue.js 시작하기] - Vuetify 로 웹 디자인 하기

Vuetify란?

Vuetify는 Vue.js를 위한 컴포넌트 라이브러리이며,  Material Design Framework다.

쉽게 말해 vue 에서 사용할 수 있는 용이한 UI 라이브러리라고 할 수 있다.

 

vuetifyjs.com/en/

Vuetify — A Material Design Framework for Vue.js

 

Vuetify 설치

Vuetify를 기존 프로젝트에 적용하려면 Vuetify를 node_modules에 반드시 설치해야한다.

이때 npm을 사용할 수 있고 다음과 같은 명령어를 사용하면 된다.

 

npm install vuetify

이후 /node_modules에 vuetify가 추가된 것을 확인할 수 있다.

 

Vuetify는 Material Design Icons, Material Icons, Font Awesome 4 및 Font Awesome 5를 지원하는 부트 스트랩으로

제공되기 때문에 아이콘 및 글꼴을 사용하기 위해서 다음 명령어 또한 사용해야한다.

npm install --save material-design-icons-iconfont

 

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'

Vue.config.productionTip = false

export const eventBus = new Vue()

//iconfont 인스턴스화 중에 옵션 추가
export default new Vuetify({
  icons: {
    iconfont: 'md' // 'md' || 'mdi' || 'fa' || 'fa4'
  }
})

Vue.use(Vuetify)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  vuetify: new Vuetify(),
})

Vuetify 설치 후, root 인스턴스인 main.js의 Vue 인스턴스 옵션에 Vuetify object를 추가해주면 된다. 

 

Vuetify 사용 설정이 끝났으므로 하위 컴포넌트에서 Vuetify UI Components 를 맘껏 사용할 수 있다.

이제 간단한 페이지를 만들어보겠다. 

 

App.vue 

//이전 App.vue
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

이전의 UI는 style 태그에서 문서나 문서 일부에 대한 스타일 정보를 수정하였기 때문에 한계가 있었지만,

 

<template>
  <v-app id="app">
    <v-navigation-drawer v-model="drawer" app>
      탭 안에 있을 UI
    </v-navigation-drawer>

    <v-app-bar app>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>Test Application</v-toolbar-title>
    </v-app-bar>

    <v-main>
      <v-card class="mx-auto" max-width="344">
        <v-card-text>
          <div>오늘의 단어</div>
          <p class="display-1 text--primary">responsive web design</p>
          <div class="text--primary">
            화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다.
          </div>
        </v-card-text>
        <v-card-actions>
          <v-btn text color="deep-purple accent-4"> Learn More </v-btn>
        </v-card-actions>
      </v-card>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      drawer: null,
    };
  },
};
</script>

 

Vuetify 공식 홈페이지에서 제공하는 와이어프레임 및 다양한 UI 컴포넌트들을 활용하여 쉽게 반응형 

웹 페이지를 만들 수 있었다.

 

위의 와이어프레임을 제외하고 다른 것들도 많이 있으니 페이지 성격에 따라 와이어프레임을 활용하면

정말 좋을 것 같다.

 

vuetifyjs.com/en/getting-started/wireframes/#examples

Wireframes

 

Vue로 프로젝트를 진행하고 Vuetify를 사용하면서 다양한 UI 컴포넌트를 사용해보았다.

Vuetify UI 컴포넌트 문서에서 기본적으로 제공되고 있는 속성이나 기능을 변경 및 추가하고 싶을때

관련 api 문서를 읽어보면 속성 등을 활용하여 충분히 원하는 것을 만들어 낼 수 있다고 생각한다.

 

그래도 select나 data table 등에 복잡한 기능을 추가하고 싶을 때, 헤맸던 경험이

있기 때문에 추후에 모아서 정리할 예정이다.