8. Vue와 Firebase로 나만의 사이트 만들기 - vuetify 설치하기

 

 

 

VF - 8강

 

 

 

---

• 이번 강에서는 responsive, 반응형에 대해서 알아볼 것이다.
• naver.com의 경우 PC용은 naver.com이지만, 모바일용은 m.naver.com이다.
• 이렇게 되면 2가지의 웹 페이지를 만들어야 하며, 수정이나 추가할 때 복잡해질 것이다.

 

• vuetify는 vue로 만들어진 CSS 프레임워크이다.
• 예전에는 폰트크기라도 수정하는 것에 신경을 많이 써야 했다.
• 하지만 vuetify는 PC, 태블릿, 모바일에 적당한 폰트크기를 제공해주어 이러한 문제를 해결해 줄 수 있다.
• vuetify는 플러그인 형태로 지원을 하며, Vuetify Vue CLI package 라고 한다.
• vuetify는 아래의 명령어로 추가할 수 있다.

$ vue add vuetify

• 이러한 플러그인은 보통 선택하는 것이 있다.

• Configure를 선택한다.

• App.vue의 내용을 HelloWorld.vue로 바꿀 것인가? 에서 어차피 바꿀 것이기 때문에 Yes를 선택한다.

• 커스텀 테마는 자기가 이것 저것 CSS를 일부 조율해서 할 수 있다. 이것을 테마라고 하는데 나중에 해볼 것이다. 일단은 기본값으로 No를 선택한다.

• 폰트는 Material Design Icons를 기본값으로 사용하며, Material Icons는 아이콘 수가 적고, Font Awesome은 유행이 좀 지났다고 한다.
  • 강사가 사용하는 Material Design Icons의 코드 : https://pictogrammers.github.io/@mdi/font/2.0.46/

Material Design Icons

• 폰트같은 것들을 오프라인에서도 사용할 것이냐? (Electron 같은 경우에는 데스크탑 프로그램인데 이것은 인터넷이 안되는 환경에서도 해야한다.) 하지만 보통 인터넷이 다 되고 링크해서 하는게 낫기 때문에 No를 선택한다.

• a-la-carte components를 Yes라고 한다. 이것을 설명하면 vuetify를 쓴다고 하면 UI 컴포넌트를 쓰게 되는데 이것은 엄청나게 많기 때문에 a-la-carte components를 쓰지 않으면 무식하게 다 import를 하게 된다. 즉, a-la-carte components을 사용하면 영리하게 쓰는 것만 가져오게 된다.
• 최종적으로 선택은 위와 같다.

 

• vuetify는 보통 최신 브라우저를 지원한다.
  • vuetify의 자세한 지원 현황 : https://vuetifyjs.com/en/getting-started/browser-support/

Browser support

 

• vuetify를 추가할 때 HelloWorld로 변경을 yes하여 아래와 같이 나오게 된다.

 

• 맛보기로 하나 코드를 추가해보자.

<!-- HelloWorld.vue -->
<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-img
          :src="require('../assets/logo.svg')"
          class="my-3"
          contain
          height="200"
        />
      </v-col>

      <v-col class="mb-4">
        <h1 class="display-2 font-weight-bold mb-3">
          Welcome to Vuetify
        </h1>
        <v-btn>버튼</v-btn> <!-- 버튼 추가 -->
...

• 위 그림처럼 버튼이라도 vuetify스럽게 효과가 들어가있고, 일반 버튼이랑은 다른 것을 볼 수 있다.

 

• 앞으로 이 CSS 프레임워크 Vuetify를 이용하여 하나씩 화면을 만들어 나갈 것이다.

 

• memi dev 유튜브 강의 보기
  • https://memi.dev/board/lecture/1597405446356
  • https://www.youtube.com/watch?v=3ku0mNzBDAw 

8 vuetify 설치하기 : memi

 

 

 

---

해당 글은 [memi dev] 유튜브 채널을 토대로 공부한 내용을 기록하기 위하여 작성됨.

 

---