Vutifiy 및 vee-validate:Vue를 사용합니다.js Step by Step

이 시리즈는 쉬운 부분부터 블루다.js를 사용하기 시작하여 정식으로 사용하는 순서를 천천히 기록하고 있습니다.저번는 Vue입니다.js를 가져와 Vue CLI로 만든 애플리케이션을 Giithub Pages로 디자인했습니다.
이번에는 Vue용 UI 프레임워크Vuetify와 포엠발리 일쿠vee-validate를 사용했다.

Vuetify 사용

Vue용 UI 프레임워크는 Bootstrap 및 Tailwind CSS를 기반으로 한 다양한 유형이 있습니다.Vuetify의 특징은 재료 디자인을 채택한 것이다.그리고,Vue.js 기반 응용 프로그램 프레임워크 Nuxt.js에서도 사용할 수 있습니다.
소재 디자인은 Google이 권장하는 디자인 시스템으로 Google의 응용 프로그램과 웹 서비스 등에 사용된다.Vuetify를 사용하면 화면 레이아웃과 UI 위젯 구성 등을 효율적으로 통일감 있게 진행할 수 있다.

Vuetify — A Material Design Framework for Vue.js
https://vuetifyjs.com/ja/

Vue Material Design Component Framework — Vuetify.js
https://v2.vuetifyjs.com/ja/

가져오기

새로운 뷰.js 프로젝트가 생성되지 않은 경우 Vuetify를 가져오려면 Vue CLI에 라이브러리를 추가하기만 하면 됩니다.중간에 사용할 버전을 물어볼 수도 있습니다. 어쨌든 기본 버전을 선택하십시오.

$ vue create vuetify-app
$ cd vuetify-app
$ vue add vuetify

그래서 src/plugiens/에서vuetify.js를 사용할 수 있고 Vuetify를 사용할 수 있습니다.
src/plugins/vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';

Vue.use(Vuetify);

export default new Vuetify({
});

로컬에서 동작을 확인하면 이런 느낌이 든다.

암흑 모드

vuetify.js에서 옵션을 지정하면 어둠 모드로 전환할 수 있습니다.
src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  theme: { dark: true },
})

창에 텍스트 입력

Vuetify 는 다양한 UI 구성 요소를 갖추고 있습니다.
Form으로 텍스트를 입력하면 이런 느낌입니다.

Hello World입니다.아래와 같이 기술하다.
우선template 부분입니다.form 탭에서 v-text-field 탭을 기술합니다.
src\components\HelloWorld.vue

<template>
  <v-container>
    <v-row class="text-left">
      <v-col cols="12">
        <v-img
          :src="require('../assets/logo.svg')"
          class="my-3"
          contain
          height="200"
        />
      </v-col>

      <v-col class="mb-4">
        <h1 class="display-2 font-weight-bold mb-3">
          Hello world
        </h1>

        <p class="subheading font-weight-regular">
          For help and collaboration with other Vuetify developers
        </p>

        <form>
            <v-text-field
                v-model="greeting"
                label="Input"
            ></v-text-field>
            <p>Output: {{ greeting }}</p>
        </form>
      </v-col>

    </v-row>
  </v-container>
</template>

script 부분에서 양방향 연결을 지정합니다.
src\components\HelloWorld.vue

<script>
  export default {
    name: 'greeting',
    data () {
        return {
            greeting: ''
        }
    }
  }
</script>

색상 지정

Vuetify에서도 색상을 쉽게 지정할 수 있습니다.
이것은template 부분에서'primary'와'secondary'를 지정하는 작용입니다.예를 들어, src/App입니다.vue의 헤더 부분에'primary'가 지정되어 있습니다.
src/App.vue

<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >

그리고 vuetify.js에서 모든 캐릭터의 색을 지정합니다.vuetify/lib/util/colors를 가져오면 색상 이름으로 지정할 수 있습니다.
src/plugins/vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
import colors from 'vuetify/lib/util/colors'

Vue.use(Vuetify);

export default new Vuetify({
    theme: {
        themes: {
          light: {
            primary: colors.blueGrey,
            secondary: colors.grey,
            accent: colors.pink.accent2,
            error: colors.pink.lighten2,
          },
        },
    },
});

vee-validate 사용

Form 발리 라이브러리vee-validate를 사용하면 Form에 입력한 값을 확인할 수 있습니다.Vue.js의 버전에 따라vee-validate의 버전이 다르다는 것을 주의하십시오.

VeeValidate v3 <= Vue.js Ver.2
https://vee-validate.logaretm.com/v3/

VeeValidate v4 <= Vue.js Ver.3
https://vee-validate.logaretm.com/v4/

가져오기

vee-validate 가져오기 역시 Vue CLI에 라이브러리 추가에 불과합니다.

$ yarn add vee-validate

사전 설정 규칙 사용

vee-validate는 표준 규칙미리 설정하다을 준비했다.예를 들어, 다음 규칙을 사용할 수 있습니다.

필수

최소 문자, 최대 문자

이메일 형식

vee-validate를 사용하려면script 부분은 다음과 같습니다.여기에 규정된 최대 문자 수의 max를 읽었습니다.
src\components\HelloWorld.vue

<script>
  import { ValidationProvider, extend} from "vee-validate";
  import { max } from 'vee-validate/dist/rules';

  extend('max', {
    ...max,
    message: 'Exceeds maximum length'
  });

  export default {
    components: {
        ValidationProvider
    },

    name: 'greeting',
    data () {
        return {
            greeting: ''
        }
    }
  }
</script>

그런 다음 template 섹션의 form 태그에 Validation Provider 태그를 추가합니다.이때 최대 문자 수는 3으로 설정됩니다.
src\components\HelloWorld.vue

<form>
    <ValidationProvider v-slot="{ errors }" rules="max:3">
        <v-text-field
            v-model="greeting"
            :error-messages="errors"
            label="Input"
            :success="valid"
        ></v-text-field>
    </ValidationProvider>
    <p>Output: {{ greeting }}</p>
</form>

일본어로 댓글 달아주세요.

오류 정보는 기본적으로 일본어 정보를 사용할 수 있습니다.

Hello World입니다.vue의script 부분은 다음과 같다.
src\components\HelloWorld.vue

<script>
  import { ValidationProvider, extend, localize } from "vee-validate";
  import { max } from 'vee-validate/dist/rules';
  import ja from 'vee-validate/dist/locale/ja';

  extend('max', max);
  localize('ja', ja);

  export default {
    components: {
        ValidationProvider
    },

    name: 'greeting',
    data () {
        return {
            greeting: ''
        }
    }
  }
</script>

공개 애플리케이션

GiitHub Pages에는 Vuetify와 vee-validate를 사용하는 앱이 공개됐다.

데모 페이지(Giithub Pages)
https://ycatch.github.io/vuetify_app/

소스 코드(Giithub)
https://github.com/ycatch/vuetify_app

참조 페이지

Vuetify

Vuetify — A Material Design Framework for Vue.js
https://vuetifyjs.com/ja/

주제 설정 - Vuetify
https://vuetifyjs.com/ja/features/theme/

Vuetify 주제(스타일) 변경 정보 - Qita
https://qiita.com/yusuke-ka/items/80dd90307e2b5debf5b8

vee-validate

Vuelidate | A Vue.js model validation library
https://vuelidate.js.org/

Handling Forms | VeeValidate
https://vee-validate.logaretm.com/v3/guide/forms.html

Localization
https://vee-validate.logaretm.com/v3/guide/localization.html

자습서

Vue.js의 표를 평가했습니다. 발리 일고 VeeValidate.
https://dev.classmethod.jp/articles/tried-using-veevalidate/

VeeValidate를 사용하여 Vue 앱에서 발리 진행
https://qiita.com/TakahiRoyte/items/843bc5da2732703de1a3

VeeValidate, vue를 사용합니다.js로 간단하게 발리 데이트 했어요. - Qita.
https://qiita.com/youdie/items/417ed2df1bcb6a60001c

VeeValidate의 Vue입니다.JS용 편리한 발리데이 | 하마나무 구현
https://www.kabanoki.net/4955/

입력 창

vue.js 입력 형식을 이해하고 능숙하게 사용하는
https://reffect.co.jp/vue/vue-js-input-operate

Vue.js로 표 쓰세요. - Qita.
https://qiita.com/MariMurotani/items/10702fbcae2997fcae80