Vuetify (Vue UI Library) 세팅하기

vuetify 공식 홈페이지(https://vuetifyjs.com/en/)

Vuetify란 무엇인가

뷰티파이는 vue 프레임워크를 사용해서 개발할 때 UI를 손쉽게 구성할 수 있도록 도와주는 라이브러리입니다. 개발에서 자주 사용되는 버튼이나 기능들을 손쉽게 찾아 쓸 수 있기 때문에 아직 미숙한 개발자들에게 개발 소요시간을 대폭 단축시킬 수 있다는 장점이 있습니다. 다만 이미 구조화된 UI를 가져다 쓰는 것이기 때문에 디테일한 CSS를 적용하기는 어려울 수 있습니다. 저희는 일단 개발에 익숙해지는 단계이기 때문에 Vuetify를 설치하고 템플릿을 가져다 쓰는 방식으로 개발을 진행해보겠습니다.

먼저 이전 글에서 설명한 것처럼 vuetify를 설치한 후 다음 내용을 진행하시기 바랍니다.

https://simsimcoding.com/entry/Vue-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0

 

 

1. 관련 Node Module 설치 (package.json)

터미널을 열고 다음과 같은 노드 모듈을 모두 설치합니다. 반드시 버전을 확인합니다!

괄호 안의 버전은 현재 제가 설치한 버전이니 호환 문제가 생긴다면 버전 업그레이드를 통해 일치하는 버전으로 변경하길 바랍니다.

1. vuetify (^2.6.10)

2. webpack 5.0 버전이상 (5.74.0)

3. vuetify-loader (^1.9.2)

4. @babel/core 7.1버전 이상 (^7.19.1)

5. @mdi/font (^7.0.96)

6. sass (^1.54.3)

7. sass-loader (^12.0.0)

8. vue-template-compiler (^2.6.14)

 

- 터미널 설치 명령어

// dependencies 설치
yarn add vuetify
yarn add vuetify-loader
yarn add vue-template-compiler

// devDdependencies 설치
yarn add webpack
yarn add @babel/core -D
yarn add @mdi/font -D
yarn add @sass -D
yarn add @sass-loader -D


// 설치 시 버전 명시 방법 (끝에 @와 버전을 명시)
yarn add vuetify@2.6.10

 

2.  tsconfig.json 설정 변경

다음은 탐색기에서 tsconfig.json 파일을 열어 내용을 수정합니다. 

경로는 저희가 만든 프로젝트 가장 상위에 위치해 있습니다. 

newproject> tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    
    // "strict" 를 false로 수정
    "strict": false,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    
    // "types" 에 "vuetify" 추가
    "types": [
      "vuetify",
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    
    // "lib" 에 "es5"와 "es6"를 추가
    "lib": [
      "es5",
      "es6",        
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

주석으로 수정된 부분을 명시해 두었습니다. 위와 같이 "strict", "types", "lib"의 내용을 변경해 줍니다. 

 

 

3. Vuetify 플러그인 파일 추가

이제 새로운 폴더를 생성하고 플러그인 파일을 추가해야 합니다. 

다음의 같이 플러그인 파일을 직접 생성합니다.

newproject> src 에 새폴더 생성 (폴더 명칭: plugins)

plugins 에 새파일 생성 (파일 명칭: vuetify.ts)

 

새로운 파일에 해당 내용을 추가합니다.

import '@mdi/font/css/materialdesignicons.css';
import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

const theme = {
    primary: '#4CAF50',
    secondary: '#9C27b0',
    accent: '#9C27b0',
    info: '#00CAE3',
  }

export default new Vuetify({
    theme: {
        themes: {
          dark: theme,
          light: theme,
        },
      },

    breakpoint: {
          thresholds: {
            xs: 480,
            sm: 1024,
            md: 1280,
            lg: 1919,
          },
        },  
});

 

 

4. Main.ts 전역 사용 설정

마지막으로 탐색기에서 main.ts 파일을 열어 내용을 수정합니다. 

경로는 프로젝트의 src 내부에 위치해 있습니다. 

newproject> src> main.ts

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'

// vuetify를 전역으로 사용
import vuetify from './plugins/vuetify';
import Vuetify from "vuetify/lib";
Vue.use(Vuetify)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  
  // vuetify 추가
  vuetify,
  render: h => h(App)
}).$mount('#app')

이제 앞으로 저희가 만드는 앱에서 사용하는 모든 컴퍼넌트 파일에는 vuetify를 사용할 수 있습니다. 

 

 

5.v-app 사용

Vuetify UI 컴퍼넌트는 <v-app> 내부에서만 정상 작동합니다. 

따라서 App.vue 파일에서 앱 전체를 <v-app>으로 묶어줍니다.

경로는 프로젝트의 src 내부에 위치해 있습니다.

newproject> src> App.vue

<template>
  <v-app id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>      
    </nav>
    <router-view/>
  </v-app>
</template>

기존에 <template> 내부 <div>로 묶여 있던 것을 <v-app>으로 대체했습니다. 

 

 

Vuetify 정상 적용 여부 테스트 및 기본 사용 방법

모든 세팅이 끝났습니다. 이상 없이 완료되었는지 확인하기 위해 Vutify UI 컴퍼넌트를 추가해보겠습니다.

아무것도 들어있지 않은 AboutView.vue 파일을 열어봅니다.

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button> First Button</button>
    <v-btn> Second Button</v-btn>
    <v-btn block> Thrid Button</v-btn>   
    <v-btn disabled> Fourth Button</v-btn>      
  </div>
</template>

HTML에서 사용하는 버튼 태그 <button> 와 Vuetify에서 사용하는 v-btn 태그를 모두 넣었습니다.

저장 후 yarn serve를 통해 웹 페이지를 확인해보겠습니다.

Vuetify가 정상적으로 세팅되었다면, 다음과 같이 

http://localhost:8081/about 에서 새롭게 추가된 내용을 확인

4개의 버튼이 새롭게 추가되었습니다. 

HTML에서 기본적으로 사용하는 First Button은 버튼 형태를 가지고 있지 않아 CSS를 사용하여 직접 버튼 형태를 만들어야하는 것에 비해 나머지 버튼들은 모두 버튼 형태가 적용되어 있습니다. 또한 block이나 disabled와 같이 vuetify에서 제공하는 Props를 활용하여 쉽게 여러 기능을 변경할 수 있음을 확인했습니다.