나는 Google's Material Design에 설명된 사양에 따라 UI 요소를 만드는 것을 좋아합니다.과거에 나는 Material UI를 React로 사용했기 때문에 내가 더 자주 Vue를 사용하기 시작했을 때 비슷한 프레임워크를 찾고 있다는 것을 알게 되었다.내 임무의 답은Vuetify이다.
나는 내가 이 틀을 이해한 경험을 나눌 것이다.

요약

프로젝트 설정

어플리케이션 레이아웃

사용자 인터페이스 요소

마지막 생각

프로젝트 설정

Vuetify는 본문을 작성할 때까지 Vue 2만 지원합니다.x. 이것이 바로 내가 이 강좌에서 사용할 내용이다.
먼저 vue-cli를 사용하여 vue 프로젝트를 만듭니다.vue create vuetify-test나는 가장 원시적인 이름이 아니라는 것을 알고 있지만, 그것은 하나의 이름이다.
Vue 2를 사용하여 프로젝트를 설정하고 있습니다.x. Vuetify의 최신 안정적인 버전은 현재 Vue 3을 지원하지 않기 때문입니다.아직
나는 이 프로젝트를 위해 TypeScript를 사용하고 있지만, 너는 네가 좋아하는 모든 것을 사용할 수 있다.TypeScript 외에도 내 구성 요소에 클래스 기반 구문을 사용합니다.
설치가 완료된 후, 우리는 cd를 vuetify 테스트 디렉터리에 넣고, npm run serve를 사용하여 모든 것이 계획에 따라 진행되는지 검사할 수 있습니다.

프로젝트 설정이 완료되면 새로 설치한 프로젝트에 Vuetify 를 추가할 수 있습니다.vue add vuetify이것은 vue cli vuetify 플러그인을 사용하여 시작하고 실행할 것입니다.
기본 설정:

이렇게!
vue cli를 사용하여 간편하게 설치할 수 있습니다.
현재 npm run serve를 사용하여 검사를 진행하면 다음과 같은 큰 차이점을 볼 수 있습니다.

우리의 설정이 완성되었다. 우리는 이제 코드를 가지고 놀 수 있다.

응용 프로그램 레이아웃

배치에 대해 다른 페이지를 가리키는 링크가 있는 측면 내비게이션을 원합니다.
우선, 나는 Vuetify를 설치할 때 첨부된 모든 샘플 코드를 제거할 것이다.

항행

<v-navigation-drawer app>를 사용하면 우리는 옆에 네비게이션 표시줄이 있기를 희망한다고 vuetify에게 알려줄 수 있다.속성app은 Vuetify라는 요소가 우리의 레이아웃의 일부임을 알려줍니다.
다음은 제 응용 프로그램입니다.vue는 다음과 같이 보입니다.

<template>
  <v-app>
    <v-navigation-drawer app>
      <v-divider></v-divider>
    </v-navigation-drawer>
  </v-app>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class App extends Vue {}
</script>

@Component 좀 낯설어 보일 수도 있어요.이것은 Vue가 Vue property decorator 패키지를 통해 허용되는 클래스 기반 구문입니다.
이제 나는 우리의 내비게이션의 존재를 증명하기 위해 화신과 몇 개의 링크를 추가할 것이다.

<template>
  <v-app>
    <v-navigation-drawer app>
      <v-list>
        <v-list-item class="d-flex justify-center">
          <v-list-item-avatar 
            color="primary" 
            class="white--text"
          >
             UXE
          </v-list-item-avatar>
        </v-list-item>
      </v-list>
      <v-divider></v-divider>
      <v-list>
        <v-list-item link>
          <v-list-item-icon>
            <v-icon>mdi-email-outline</v-icon>
          </v-list-item-icon>
          <v-list-item-title>Messages</v-list-item-title>
        </v-list-item>
        <v-list-item link>
          <v-list-item-icon>
            <v-icon>mdi-file-sync-outline</v-icon>
          </v-list-item-icon>
          <v-list-item-title>Shared Files</v-list-item-title>
        </v-list-item>
        <v-list-item link>
          <v-list-item-icon>
            <v-icon>mdi-account-outline</v-icon>
          </v-list-item-icon>
          <v-list-item-title>Contact List</v-list-item-title>
        </v-list-item>
        <v-list-item link>
          <v-list-item-icon>
            <v-icon>mdi-archive-outline</v-icon>
          </v-list-item-icon>
          <v-list-item-title>
            Archived Messages
          </v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </v-app>
</template>

내가 처음으로 모든 v-this와 v-that를 보았을 때, 나는 확실히 좀 어찌할 바를 몰랐다.우리 그것을 분해합시다.
v-list는 우리가 이 방면에서 사용하는 첫 번째 새로운 구성 요소이다.우리는 이 구성 요소를 사용하여 맨 위에 우리의 화신을 표시한 다음, 서로의 아래 링크를 아래로 표시합니다.v-list-item는 그것이 말한 내용을 정확하게 설명했다. 이것은 우리의 목록의 하나이다.
우리 v-list-item-avatar 에서, 우리는 색 속성을 사용하여 화신의 배경 색을 지정합니다. 분류 white--text 는 텍스트의 색을 알려 줍니다.
맨 위의 이미지와 링크 사이에 우리는 이것<v-divider>이 있는데 수평 규칙을 통해 그것들을 분리한다.
여기 있는 모든 v-list-item 에는 링크 속성이 있습니다. 그것을 클릭하면 좋은 연쇄 반응이 나타납니다.v-list-item도 하나의 아이콘과 하나의 라벨로 구성되어 있다.이 프레임은 이 커다란 아이콘Material Design Icons Library을 이용한다.너는 이곳에서 각종 장소에 적합한 아이콘을 찾을 것이다.
우리의 결말은 이렇다.

우리의 내비게이션이 완성되었다.우리 그것을 자신의 부분으로 나누자.
이를 위해, src 디렉터리에 새 파일을 만들고, 사용자의 취향에 따라 이름을 붙일 수 있습니다. 저는 SideNavigation을 사용할 것입니다.태그에 vue 및 추가:

<template>
  <v-navigation-drawer app>
    <v-list>
      <v-list-item class="d-flex justify-center">
        <v-list-item-avatar color="primary" class="white--text"
          >UXE</v-list-item-avatar
        >
      </v-list-item>
    </v-list>
    <v-divider></v-divider>
    <v-list>
      <v-list-item link>
        <v-list-item-icon>
          <v-icon>mdi-email-outline</v-icon>
        </v-list-item-icon>
        <v-list-item-title>Messages</v-list-item-title>
      </v-list-item>
      <v-list-item link>
        <v-list-item-icon>
          <v-icon>mdi-file-sync-outline</v-icon>
        </v-list-item-icon>
        <v-list-item-title>Shared Files</v-list-item-title>
      </v-list-item>
      <v-list-item link>
        <v-list-item-icon>
          <v-icon>mdi-account-outline</v-icon>
        </v-list-item-icon>
        <v-list-item-title>Contact List</v-list-item-title>
      </v-list-item>
      <v-list-item link>
        <v-list-item-icon>
          <v-icon>mdi-archive-outline</v-icon>
        </v-list-item-icon>
        <v-list-item-title>Archived Messages</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class SideNavigation extends Vue {}
</script>

현재 우리는 응용 프로그램에 이 구성 요소를 추가할 수 있습니다.vue.
맨 위에 있는 구성 요소를 가져온 다음 등록합니다.

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import SideNavigation from "@/components/SideNavigation.vue";

@Component({
  components: {
    SideNavigation,
  },
})
export default class App extends Vue {}
</script>

마지막으로 템플릿에서 사용할 수 있습니다.

<template>
  <v-app>
    <side-navigation></side-navigation>
  </v-app>
</template>

이 구성 요소는 확실히 외로워 보인다. 좀 더 추가하자.

UI 요소

Vuetify팀은 그들이 만든 정교한 구성 요소를 사용하는 다양한 방식을 기록하는 데 매우 잘했다.나는 네가 무엇을 생각해 낼 수 있는지 다른 구성 요소를 시도해 보라고 절대로 격려한다.

기본 재료 설계표

나는 그들이 폼을 만드는 방식이 매우 유용하고 재미있다는 것을 발견했기 때문에, 나는 그것을 UI 요소의 예로 사용할 것이다.
Here는 궁금한 사람을 위한 표 문서입니다.
등록 양식의 새 파일인 SignUpForm을 만듭니다.vue.
사용할 템플릿은 다음과 같습니다.

<template>
  <v-form>
    <v-container>
      <v-row>
        <v-col cols="12" md="6">
          <v-text-field
            v-model="user.firstName"
            :rules="nameRules"
            :counter="10"
            label="First name"
            required
          ></v-text-field>
        </v-col>

        <v-col cols="12" md="6">
          <v-text-field
            v-model="user.lastName"
            :rules="nameRules"
            :counter="10"
            label="Last name"
            required
          ></v-text-field>
        </v-col>

        <v-col cols="10" md="8">
          <v-text-field
            v-model="user.email"
            :rules="emailRules"
            label="E-mail"
            required
          ></v-text-field>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="12" md="12">
          <v-btn block color="green darken-2" class="white--text"
            >Submit My Data</v-btn
          >
        </v-col>
      </v-row>
    </v-container>
  </v-form>
</template>

이렇게 하면 다음과 같은 형태가 됩니다.
v-form는 폼 용기를 지정했습니다. 그 중에서 우리는 v-container를 사용하여 임의의 측면에 충전을 추가합니다.
우리v-container 중에서 우리v-rows와 v-cols가 있다.요소 행과 열의 배치 방법을 제어합니다.
만약 네가 Bootstrap에 익숙하다면, 이러한 개념들은 너에게 있어서 완전히 새로운 것이 아닐 것이다.Vuetify 문서 자체는 프레임이 부트의 심각한 영향을 받는다고 선언합니다.
이 경우 v-cols와 cols로 md의 폭을 조절할 수 있다.
이전에 Vue를 사용한 적이 있다면 v-model 익숙해 보일 것입니다.이것이 바로 Vue가 사용자가 입력한 데이터나 API에서 보낸 데이터 등을 관리하는 방식입니다.
우리의 이름과 성씨의 두 입력 필드는 두 개의 기둥이 있다. :rules 과 :counter.:rules 아이템은 오류가 발생했는지 확인하고 정확한 오류 메시지를 표시합니다.

private nameRules = [
    (value: string) => !!value || "Field ist required",
    (value: string) =>
      value.length <= 10 || "Maxmimum of 10 Characters allowed",
  ];

:counter 아이템은 문자 수를 계산하여 사용자에게 표시:

오류 상태는 다음과 같습니다.

이름에는 허용되는 10자 대신 14자의 문자가 있습니다.
이 필드를 비워 두면 다음과 같은 오류가 발생합니다.

내 스크립트 태그의 전체 유효성 검사 규칙은 다음과 같습니다.

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class SignUpForm extends Vue {
  private user = {
    firstName: "",
    lastName: "",
    email: "",
  };

  private nameRules = [
    (value: string) => !!value || "Field ist required",
    (value: string) =>
      value.length <= 10 || "Maxmimum of 10 Characters allowed",
  ];

  private emailRules = [
    (value: string) => !!value || "Field is required",
    (value: string) => /.+@.+/.test(value) || "E-Mail must be valid",
  ];
}
</script>

전자 우편으로 입력한 인증 규칙도 있습니다. 문자열에 @ 기호가 있는지 확인하는 정규 표현식입니다.없으면 오류 메시지가 다시 표시됩니다.

마지막 생각

본문은 여기까지다.
이것은 Vuetify가 제공하는 일부분입니다. 다음 프로젝트에서 Vuetify를 사용하는 것에 관심이 있다면, 저는 전심전력으로 추천할 수 있습니다. documentation
이 문서들은 당신이 시험적으로 사용할 수 있는 다른 옵션이 있기 때문에 매우 좋다.그들은 문서를 더욱 상호작용적이고 흥미롭게 하는 데 아주 좋은 일을 했다.
브라우저에서 버튼의 버전을 만든 다음 코드로 변환할 수 있습니다.

그런 다음 버튼 표시를 항목에 직접 복사합니다.
만약에 이전에 Vuetify나 다른 재질의 디자인 프레임을 사용한 적이 있다면 (Vue와 관련된 프레임이 아닐 수도 있음) 댓글을 남겨서 저에게 체험을 알려주세요.
나는 너의 소식을 매우 듣고 싶다.