Vuetify

Vuetify란?

Vuetify란 구글의 material design을 사용할 수 있게 만든 Vue.js를 위한 UI 프레임워크입니다.
Vuetify는 사용자가 원하는 컴포넌트를 사용할 수 있도록 다양하고 유용한 라이브러리를 제공합니다. 

 

 

vuetifyjs.com/en/

Vuetify — A Vue Component Framework

 

 

Bidirectionality : 오른쪽에서부터 왼쪽으로 글을 쓰는지, 왼쪽에서 오른쪽 방향으로 글을 쓰는지 설정 할 수 있습니다.

Global configuration : Vuetify.config 는 부트스트랩 옵션을 수정하기 위한 전역 구성 옵션을 포함하는 개체입니다.

Icon Fonts : Material Design Icons, Font Awesome 4, Font Awesome 5 를 지원합니다. 사용하기 위해서는 npm 또는 yarn을 이용해 설치해야 합니다.

Layouts : v-app은 구성 요소는 애플리케이션의 루트이며 기본 vue 진입점인 <div id="app"> 를 직접 대체합니다. v-main 구성 요소는 기본 HTML 요소와 애플리케이션 콘텐츠의 루트에 대한 의미론적 대체입니다. Vue가 DOM에 마운트되면 레이아웃의 일부인 Vuetify 구성 요소는 현재 높이 또는 너비를 프레임워크 코어에 등록합니다. 그런 다음 v-main 구성 요소는 이러한 값을 가져와 컨테이너 크기를 조정합니다.

Theme : light와 dark 두가지가 있습니다. default는 light이고, dark 모드는 옵션으로 설정 가능합니다. 색상은 커스터마이징도 가능합니다.

Accessibility : 접근성에 용이하게 만들어 주는 도구들입니다.

Display Breakpoints : 화면 크기별로 애플리케이션을 구성합니다. 그리드 및 기타 반응형 도우미 클래스들과 함께 작동합니다.


Internatinalization(i18n) : Vuetify는 여러 언어를 제공합니다. Vuetify의 기본 번역을 사용 할 수도 있고, 사용자가 번역을 추가 할 수도 있습니다.

Programmatic scrolling : goTo 메소드를 사용해서 scroll 이동한다. 숫자, 섹션, DOM Element 로 타겟을 지정 할 수 있다.

SASS variables : SASS/SCSS를 사용하여 프레임워크의 모든 측면에 대한 스타일과 모양을 만듭니다.(vue-cli, Nuxt, Webpack)

Presets : 테마, 중단점, 아이콘 등등 화면에 보이는 것을 미리 설정합니다.

  Vue CLI v4.5.9
  ? Please pick a preset: (Use arrow keys)
  > Default ([Vue 2] babel, eslint)
    Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
    Manually select features
Treeshaking : 말그대로 나무 털기입니다. 작은 프로젝트를 만드는데 커다란 프레임워크는 필요하지 않기 때문에 부분적으로 사용 할 수 있습니다.