[Vue.js] Vue에서 Vuetify사용

[Vue.js] Vue에서 Vuetify사용

안녕하세요. 코드파인더입니다.

이번 포스팅에서는 Vuetify사용 방법에 대해 알아보도록 하겠습니다.

Vuetifiy란?

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

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

[Vuetify 시작하기]

Vue-cli를 이용하여 Vuetify 패키지 Vue 프로젝트에 추가

Vue-cli를 이용하여 Veu프로젝트를 만드는 방법은 이전 블로그 포스팅을 참조하시기 바랍니다.

2021.11.15 - [개발 Recording/vue.js & javascript] - [Vue.js] Vue-cli를 이용하여 Vue 프로젝트 생성하기

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

명령어 : vue add vuetify

vue에 vuetify 추가하기

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

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

Vuetify 패키지 선택화면

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

Vuetify 설치완료

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

명령어 : npm run serve

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

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

local 프로젝트 화면

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

https://vuetifyjs.com/en/

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

Vuetify 홈페이지 화면

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

from http://codepathfinder.tistory.com/28 by ccl(A) rewrite - 2021-11-17 09:02:31