[Vue.js] vuetify 라이브러리 설치해보기

Vuetify

Vue.js 를 위한 vuetify 라이브러리를 설치해보도록 하겠습니다. vuetify는 bootstrap과 비슷하게 사용자에게 보여지는 UI 컴포넌트를 편리하게 디자인 할 수 있도록 제공해주는 라이브러리입니다.

 

https://vuetifyjs.com/en/getting-started/installation/

Get started with Vuetify

 

다양한 테마와 버튼, 캘린더, 카드, 다이얼로그 등 의 UI 컴포넌트를 제공하고 있습니다.

 

 

 

Vuetify 설치하기

Vuetify를 설치하기 위해 Vue.js 가 기본적으로 설치되어야 합니다. 저는 vue.js를 이미 설치한 상태로 tool은 Visual Studio 프로그램으로 진행하였습니다.

 

설치할 경로에 터미널 창을 열고 다음과 같은 명령어를 실행합니다.

vue add vuetify

default로 선택하고 enter를 누룹니다.

vuetify 가 설치 완료되었습니다.

 

프로젝트 내 src/plugins 폴더 밑에 vuetify.js 파일 생성된 것 확인할 수 있습니다.

 

 

개발 서버 띄워서 브라우저 화면을 확인해보도록 하겠습니다.

 

 크롬으로  http://localhost:8080/ url 경로로 들어갑니다.

 

이러한 화면이 뜨면 vuetify 가 성공적으로 설치가 완료된 것입니다.