vue.js - vuetify 설치 및 사용하기

이번에 프로젝트를 들어가면서 vuetify를 자주 쓴다는 이야기를 듣고 vuetify를 시작하게 되었다. 처음 시작하는거라 설치 및 간단한 화면을 해보기로 했다.

 

vuetify 설치하기

vue.cmd add vuetify

 

 

vuetify는 다른 오픈 소스와 다르게 vue-cli를 이용해서 프로젝트를 생성후에 해당 프로젝트에 플러그인을 add하는 방식이다.

생성된 프로젝트위치에서 터미널로 vue.cmd add vuetify 를 실행하면 still proceed?y/n 이 나오고 y를 입력하면 설치된다. 그리고 설치 이후 choose a preset 이 나오는데 default로 설치했다.

 

 

 

 

설치가 끝나니

• plugins/vuetify.js 생성
• main.js vuefity import

가 자동으로 되어있다. 그리고 app.vue와 HelloWorld.vue 파일이 수정되어있다.

 

vuetify 확인

 

 

수정된 프로젝트를 npm run serve 를 실행해서 확인했더니 app.vue가 vuetify로 변경된것을 확인할수 있다.

 

v-text-field 간단 테스트

vuetifyjs.com/en/components/text-fields/가면 vuefity의 v-text-filed 의 여러기능 소스를 볼수도 있고 template / script를 참고하여 사용할수 있다.

 

 

 

<template>
  <v-container>
    <v-text-field
            solo
            label="Solo"
            clearable
          ></v-text-field>
  </v-container>
</template>

 

 

vuetify에서 template를 복사하여 테스트해보았다. clearable 사용하여 데이터 삭제 버튼도 간단하게 사용가능하다.

 

오늘은 간단하게 vuetify에 대해 설치 및 사용을 해보았다. 다음에는 vuetify의 여러기능에 대해 정리해보도록 하겠다.