반응형

Vuetify Vue.js를 기반으로 구축된 완전한 UI 프레임워크입니다. 프로젝트를 구축하는 데 필요한 도구를 개발자에게 제공하므로 다른 Framework와 달리 접근하기 쉽습니다. Vuetify의 장점으로는 디자인에 대한 모바일 우선 접근 방식을 취하므로 애플리케이션이 휴대전화, 태블릿 또는 데스크톱 컴퓨터에 있든 상관없이 바로 사용할 수 있습니다. 이번 포스팅에서는 Vue에서 Vuetify사용 방법에 대해 알아보도록 하겠습니다.

 

Vuetify의 성장

Vuetify는 2014년 첫 출시 이후 Veu.js기반의 가장 인기 있는 JavaScript 프레임워크 중 하나로 성장했습니다. 이러한 인기의 이유 중 하나는 개발자가 응용 프로그램 전체에서 사용 및 재사용할 간결한 모듈을 만들 수 있도록 하는 구성 요소의 광범위한 사용입니다. UI 라이브러리는 특정 스타일 지침을 구현하고 광범위한 웹 애플리케이션을 구축하는데 필요한 도구를 제공하는 모듈의 모음입니다.

1. Vuetify 시작하기

Vue-cli 이용하여 Vuetify 패키지 Vue 프로젝트에 추가(Vue-cli 이용하여 Veu프로젝트를 만드는 방법은 이전 블로그 포스팅을 참조하시기 바랍니다.)

 

Vue-cli 통해 만들어진 프로젝트로 이동하여 Vuetify 추가합니다.

명령어 : vue add vuetify

vue에 vuetify 추가하기

y를 눌러 설치를 진행합니다.

 

Default를 선택합니다.(Vue-cli로 프로젝트 생성시 Vue3를 선택하셨으면 Default 설치는 되지 않습니다. Vue3 선택시 Default가 아닌 Vuetify 3로 설치할 수 있으나 다른 모듈들과 의존성 문제가 발생합니다. )

Vuetify 패키지 선택화면

정상적으로 설치가 되면 아래와 같이 설치를 완료했다는 메시지들이 나옵니다.

Vuetify 설치완료

 

2. 프로젝트 실행

정상적으로 설치되었는지 확인을 하기위해 해당 프로젝트를 실행시킵니다.

명령어 : npm run serve

에러가 없으면 아래와 같이 로컬서버를 실행할 수 있습니다. 해당 경로를 웹 브라우저에 복사해서 붙여넣으시거나 Ctrl키를 누른상태에서 해당 경로를 클릭하면 웹페이지가 실행됩니다.

아래와 같이 Vuetify화면이 뜨면 정상적으로 설치가 완료된 것 입니다.

local 프로젝트 화면

 

3. Vuetify 활용방법

아래의 Vuetify 홈페이지에 들어가시면 컴포넌트들을 확인하실수 있습니다.

https://vuetifyjs.com/en/

 

Vuetify — A Material Design Framework for Vue.js

Vuetify is a Material Design component framework for Vue.js. It aims to provide all the tools necessary to create be...

vuetifyjs.com

 

Vuetify 홈페이지에 들어가시면 Framework에서 제공하는 컴포넌트들을 확인하실 수 있습니다. 다양한 무료 및 유료 템플릿들도 제공하므로 프로젝트를 쉽고 빠르게 진행할 수 있습니다.

Vuetify 홈페이지 화면

여기까지 Vuetify사용방법에 대한 포스팅을 마치도록 하겠습니다.

반응형

+ Recent posts