注册vee-validate笔记

官方文件：https://vee-validate.logaretm.com/v4/

npm 安装
npm install vee-validate @vee-validate/rules @vee-validate/i18n--save

先在main.js汇入

/* eslint-disable vue/multi-word-component-names */import { createApp } from 'vue'import { Field, Form, ErrorMessage, defineRule, configure } from 'vee-validate'import { required, email, min } from '@vee-validate/rules'import { localize, setLocale } from '@vee-validate/i18n'import zhTW from '@vee-validate/i18n/dist/locale/zh_TW.json'import App from './App.vue'import router from './router'defineRule('required', required)defineRule('email', email)defineRule('min', min)configure({  // Generates an English message locale generator  generateMessage: localize({ zh_TW: zhTW }),  validateOnInput: true})setLocale('zh_TW')const app = createApp(App).use(router)// 注册Field, Form, ErrorMessage 需在createApp后方，且在mount前方app.component('Form', Form)app.component('Field', Field)app.component('ErrorMessage', ErrorMessage)app.mount('#app')

接下来到表格所在的.vue

<template>  <div class="home">    <img alt="Vue logo" src="../assets/logo.png" />    <HelloWorld msg="Welcome to Your Vue.js App" />    <Form @submit="onSubmit" v-slot="{ errors }">      {{ errors }}      <div class="mb-3">        <label for="email" class="form-label">Email</label>        <Field          id="email"          name="email"          type="email"          class="form-control"          rules="email|required"          v-model="user.email"          :class="{            'is-invalid': errors['email'],            'is-valid': !errors['email'] && user.email          }"          placeholder="请输入 Email"        ></Field>        <error-message name="email" class="invalid-feedback"></error-message>      </div>      <button class="btn btn-primary" type="submit">Submit</button>    </Form>  </div></template>

同页的script

<script>// @ is an alias to /srcimport HelloWorld from '@/components/HelloWorld.vue'export default {  name: 'HomeView',  components: {    HelloWorld  },  data () {    return {      user: {}    }  },  methods: {    onSubmit () {      console.log('Submitting :(')      console.log(this.user)    }  },  created () {    console.log(this)  }}</script>