CSS종결자 Vuetify

CSS종결자 Vuetify

Vuetify는 디자인 요소를 꾸미기 힘들어 하는 사람에게 꼭 필요한 vue 프레임워크의 CSS라이브러리 입니다.

1. Vuetify 시작하기(설정 방법) 

🔵 vue프로젝트를 설치합니다. vueify 버전3이 있으나 오랜시간동안 안정성이 검증된 vuetify2 를 설치하기 위해 vue2 버젼으로 vue프로젝트를 설치합니다. vue create myapp

🔵 vue프로젝트 설치후에 곧바로 vuetify 패키지를 vue프로젝트에 추가합니다. =>  vue add vuetify

2. Vuetify 사용 방법

Vuetify가 설치되면 'v-' 로 시작하는 새로운 Vuetify 태그를 이용할 수 있습니다. Vuetify태그는 그 자체로 디자인 속성이 적용이 된 태그이기때문에 복잡한 CSS를 따로 디자인할 필요가 없습니다.

<v-btn color="primary" elevation="2" ></v-btn>

 

Vuetify 홈페이지에 들어가서 사용하고 싶은 컴포넌트를 선택하여 HTML 태그 넣듯이 넣으면 각 요소별로 모든 디자인이 완성됩니다. https://vuetifyjs.com/en/components/alerts/

Vuetify — A Material Design Framework for Vue.js