Vuetify를 써보자! Hello Vuetify

Vue CLI로 설치

vue create demo-vuetify  # vue 프로젝트 생성
cd demo-vuetify          # 프로젝트로 이동
vue add vuetify          # 프로젝트에 vuetify 추가
yarn serve               # 프로젝트 실행

Hello Vuetify 

• ./src/main.js 파일을 보자
  • vue CLI로 vuetify 추가 명령어를 입력했기 때문에 약간의 변화가 생겼다.
  • vuetify 플러그인이 추가 된 것을 볼 수 있다.
• App.vue를 살펴보자.
  • Vuetify의 다양한 컴포넌트들을 볼 수 있다.
    • v-app, v-app-bar 등등
  • 구조
    
    • 주요 컴포넌트의 구조는 아래와 같다.
    •  v-app
      • v-app-bar
      • v-content

Application ( v-app )

• v-app 컴포넌트와 navigation-drawer, v-app-bar, v-footer 등과 같은 컴포넌트에 대한 app prop는 <v-content> 컴포넌트 주위의 적절한 크기로 애플리케이션을 부트스트랩하는 데 도움을 줍니다.
• 모든 애플리케이션에서 v-app 컴포넌트는 필요합니다!
• v-app은 애플리케이션에서 오직 한번만 사용해야 합니다!

App Bars

• v-app-bar 컴포넌트는 그래픽 유저 인터페이스에서 중요한 부분 입니다. 일반적으로 사이트 탐색의 기본 소스 이기 때문 입니다.
• app-bar 컴포넌트는 v-navigation-drawer와 결합하여 잘 작동합니다. 여러분의 애플리케이션에 사이트 탐색을 제공하기 위해서 말이죠.
• v-app-bar 컴포넌트는 application-widt 액션과 정보를 위하여 사용됩니다.

v-content

• 공식 문서에는 따로 정리되어 있지 않지만 애플리케이션의 컨텐츠를 담는 컨테이터 정도로 판단 된다.

그외 컴포넌트

• v-container : 아! 하면 어! 하고 알아듣자.
• v-기능별명칭 : 각 기능별로 컴포넌트가 나뉘어져있다!

이해

• Hello World만 잘 봐도 주요한 구조 파악은 끝난다.
• 이제 필요에 따라 Vuetity 각 컴포넌트를 사용하고 적절하게 props, slots, events를 확인하여 사용하면 될 것이라 판단된다.
  • SASS는 미안~