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 |
y를 눌러 설치를 진행합니다.
Default를 선택합니다.(Vue-cli로 프로젝트 생성시 Vue3를 선택하셨으면 Default 설치는 되지 않습니다. Vue3 선택시 Default가 아닌 Vuetify 3로 설치할 수 있으나 다른 모듈들과 의존성 문제가 발생합니다. )
정상적으로 설치가 되면 아래와 같이 설치를 완료했다는 메시지들이 나옵니다.
2. 프로젝트 실행
정상적으로 설치되었는지 확인을 하기위해 해당 프로젝트를 실행시킵니다.
명령어 : npm run serve |
에러가 없으면 아래와 같이 로컬서버를 실행할 수 있습니다. 해당 경로를 웹 브라우저에 복사해서 붙여넣으시거나 Ctrl키를 누른상태에서 해당 경로를 클릭하면 웹페이지가 실행됩니다.
아래와 같이 Vuetify화면이 뜨면 정상적으로 설치가 완료된 것 입니다.
3. Vuetify 활용방법
아래의 Vuetify 홈페이지에 들어가시면 컴포넌트들을 확인하실수 있습니다.
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사용방법에 대한 포스팅을 마치도록 하겠습니다.
'개발 Recording > vue.js & javascript' 카테고리의 다른 글
[Vue.js] ngrok를 이용한 localhost 외부접속-2 (0) | 2021.11.19 |
---|---|
[Vue.js] ngrok를 이용한 localhost 외부접속-1 (0) | 2021.11.18 |
[Vue.js] Vue-cli를 이용하여 Vue 프로젝트 생성하기 (0) | 2021.11.15 |
Windows 10 에서 Node.js 설치 (0) | 2021.11.07 |
Visual Studio Code 설치(한글패치) (0) | 2021.11.01 |