Vuetify란?

공식 페이지

Vue.js 머티리얼 디자인에 대한 프레임 워크입니다. React.js의 MATERIAL-UI의 Vue 버전이라고 말했습니다.

Vuetify를 사용하는 가장 큰 장점은 CSS를 작성하지 않고도 잘 구성된 UI를 만들 수 있다는 것입니다.

Vuetify 소개

VueCLI는 설치된 것으로 가정합니다.

//プロジェクトの作成
$ vue create my-app //「my-app」は何でもいいここの名前でプロジェクトが作成される

//vuetifyの追加
$ vue add vuetify

Nuxt.js 등으로 도입할 때는 여기

샘플

화면

코드

Home.vue

<template>
  <div class="home">
    <h1>HomePage</h1>
    //v-btnでボタンが作れる
    //classにpinkをあてることでピンク色に、white--textをあてることでテキストが白に
    <v-btn class="pink white--text">click me</v-btn>
    //textをつけるで背景色と影がなくなる colorで色を指定
    <v-btn text color="pink">click me</v-btn>
    // depressedをつけることで影がなくなる
    <v-btn depressed class="pink white--text">
      //v-iconでアイコンをつける mdi-emailでemaiのアイコン
      <v-icon left>mdi-email</v-icon>
      <span>EMAIL ME</span>
    </v-btn>
    //fabをつけることで丸くできる
    <v-btn fab depressed small dark color="purple">
      //v-iconでアイコンをつける mdi-heartでハートのアイコン
      <v-icon>mdi-heart</v-icon>
    </v-btn>
  </div>
</template>

<script>

export default {
}
</script>

공부방법

튜토리얼 하는 것이 쉽습니다.

영어입니다만, 화면에 비치고 있는 대로에 가면 대부분의 것을 이해할 수 있습니다.
또, 화면대로 해 능숙하지 않을 때에는, 코멘트를 보면, 해결할 수 있는 것이 많습니다.

자주 사용하는 부분의 문서 메모

아래는 내가 자주 사용한다고 느끼는 부분의 문서의 링크의 메모입니다.
대체로는 아래의 문서, 샘플 코드를 읽는 것으로 대체로 이해할 수 있을까라고 생각합니다.
Codepen에 대한 링크에 얽혀 실제로 코드를 이지 해 보는 것도 재미 있습니다.

칼라
htps : // ゔ에치 fyjs. 코 m / 자 / 스타 s / 코 rs / # 코 rs

문자 크기
htps : // ゔ에치 fyjs. 코 m / 자 / style s / ty pog et al phy / # fu t-shi s

버튼과 아이콘
htps : // ゔ에치 fyjs. 코 m / 자 / 코 m 포넨 ts / 부톤 s / # 부톤 s

양식
htps : // ゔ에치 fyjs. 코 m / 자 / 코 m 포넨 ts / 후 rms / # 후 rms

파일 사용 양식
htps : // ゔ에치 fyjs. 코 m / 자 / 코 m 포넨 ts / 후 ぇ - 프 ts ts / # 푸 ぇ - 프 ts

사용하기 편리함

자신의 손으로 CSS를 쓰지 않아도 되는 분, 익숙해지면 공수를 삭감할 가능성이 높다고 생각합니다.
꽤 정교한 표현이 필요, 라든지 아닌 한 이런 프레임워크를 사용하는 것은 개미가 아닐까 생각합니다.