Vuetify 시작

이번에는 Vuetify를 기본적으로 다뤄보기만 해보겠습니다.

 

먼저 Vue.js 파일을 만듭니다.

먼저 Vue.js를 선택합니다.

프로젝트의 제목을 입력하시고 그 외의 설정들을 바꾼 후 진행하시면 됩니다.

처음 하신다면 프로젝트 제목만 입력하고 finish 버튼을 누르면 되겠습니다.

 

그러면 Vue.js 프로젝트가 만들어집니다.

그럼 이제 터미널 창에서 진행합니다.

npm run serve를 입력하시면 프로젝트가 실행되면서 화면을 보실 수 있습니다.

이제 'vue add vuetify'를 입력합니다.

그러면 vuetify 관련 파일들이 설치됩니다.

그리고 다시 npm run serve를 입력하시면 vuetify관련 화면으로 바뀐 것을 알 수 있습니다.

(관련 캡쳐화면은 하지 못했습니다. 기본 화면이니 쉽게 확인 할 수 있습니다.)

 

이제 vuetify 관련해서 조금 알아보겠습니다.
(제가 자주 쓰는 것들을 위주로 설명하겠습니다.)

<v-container> : 화면 재정의를 합니다.

Bootstrap 에서 class="container"와 같은 역할을 하는 듯 합니다.

<template>
  <div>
<!--  <v-container>-->
    Vue.js
<!--  </v-container>-->
  </div>
</template>

이렇게 코드를 짰다면 결과화면은

이런 식으로 나옵니다.

이제 v-container를 사용하면

<template>
  <div>
    <v-container>
      Vue.js
    </v-container>
  </div>
</template>

이렇게 바뀌는 것을 알 수 있습니다.

기본적인 디자인을 적용할 때 많이 쓰일 듯 합니다.

그 외에 자료는 다음의 사이트에서 참고하면 될 듯 합니다.

https://vuetifyjs.com/ko/components/grids/

 

<v-text-field> : 입력값을 받습니다.

기존에 input을 대신해서 사용합니다.
(물론 <v-input>이라는 태그가 있습니다. 하지만 기능은 input과 많이 다릅니다. 이 부분에 대해서는 자세히 잘 알지 못합니다. 어쨌든 input대신 v-text-field을 쓰시면 되겠습니다.)

<template>
  <div>
    <v-container>
      <v-text-field></v-text-field>
    </v-container>
  </div>
</template>

코드를 작성하시면 다음과 같이 보입니다.

input과 달리 v-text-field는 굉장히 길게 나타납니다.

여기에 v-model을 사용하여 입력받은 값을 어딘가로 넘기는데 사용하시면 됩니다.

그 외에 자료는 다음의 사이트에서 참고하면 될 듯 합니다.

https://vuetifyjs.com/ko/components/text-fields/

 

<v-textarea> : v-text-field에서보다 더 긴 입력값을 입력받을 수 있습니다.

textarea 태그가 대체되었다고 생각하면 됩니다.

<template>
  <div>
    <v-container>
      <v-textarea></v-textarea>
    </v-container>
  </div>
</template>

코드를 작성하시면 다음과 같은 화면을 볼 수 있습니다.

역시 v-text-field처럼 화면을 꽉 채워서 나옵니다.
(여기서는 일부러 화면을 잘라서 보여드립니다. 실제 코드 작성을 통해 보신다면 화면에 꽉 채워져서 나옵니다.)

v-textarea 역시 v-model을 통해서 입력받은 값을 넘길 수 있습니다.

그 외에 자료는 다음의 사이트에서 참고하면 될 듯 합니다.

https://vuetifyjs.com/ko/components/textarea/

 

<v-row>, <v-col> : 화면 분할을 하는데 기본적으로 많이 사용되는 태그 입니다.

말로 설명드리기 힘들어서 바로 코드와 화면으로 보여드립니다.

<template>
  <div>
    <v-container>
      <v-row>
        <v-col>
          <v-text-field></v-text-field>
        </v-col>
        <v-col>
          <v-text-field></v-text-field>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

화면 분할이 되어서 보여집니다.

v-text-field 역시 아까 전과는 다르게 화면 전체를 차지하지 않습니다.

그리고 v-col태그에서 사용되는 옵션에 대해 설명하겠습니다.

• sm : 1~12 사이로 지정할 수 있습니다. 화면에서 나타날 사이즈를 지정합니다. 
• cols : 제한은 없는 것으로 알고 있습니다. 숫자를 마음대로 입력하시면 됩니다. 단, 제가 이 부분은 어떤 기능을 하는지 정확히 알지를 못해서 더 설명을 못 드립니다..

이 두가지 옵션은 직접 설정값을 바꿔보면서 테스트 해보는게 훨씬 도움이 된다고 생각합니다.

그리고 그 외에 옵션들이 더 많으니 찾아보면 좋을 것 같습니다.

https://vuetifyjs.com/ko/components/grids/

 

<v-select> : 선택창을 만들 때 사용합니다.

select 태그를 대신해서 사용이 됩니다.

이 부분은 제가 코드를 실행해봤는데 select 창에 아무것도 나타나질 않아서 제가 올려드릴 설명이 없습니다...

select 창에 무엇인가가 뜬 후에 다시 올리도록 하겠습니다.

 

일단은 이렇게가 지금 제가 자주 사용하는 것들입니다.

vuetify에 새로운 태그들이 많이 등장했는데

다들 앞에 'v-'가 붙었을 뿐 크게 달라진 건 없습니다.

그 외에 옵션들이 다양해진 것들이 있다는 것을 제외한다면 말이죠.

https://vuetifyjs.com/ko/components/api-explorer/

오히려 vuetify 공식 홈페이지를 보는 것이 훨씬 더 나을 것입니다.