# 在 VueCli 引入外部套件 (6-5)
###### tags: `Vue`、`6. VueCli`
2022.3.11

## 範例：引入 VeeValidate
### 1. 下載 VeeValidate 所需套件，使用 npm 指令：
* **VeeValidate 主套件**：https://vee-validate.logaretm.com/v4/
* **VeeValidate Rules**：https://vee-validate.logaretm.com/v4/guide/global-validators#vee-validaterules
* **VeeValidate i18n**：https://vee-validate.logaretm.com/v4/guide/i18n

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

### 2. 在 main.js 引入 VeeValidate 相關套件

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({
  generateMessage: localize({ zh_TW: zhTW }), // 載入繁體中文語系
  validateOnInput: true, // 當輸入任何內容直接進行驗證
});
setLocale('zh_TW');

const app = createApp(App).use(router);
// 註冊 vee-validate 三個全域元件
app.component('VForm', Form);
app.component('VField', Field);
app.component('ErrorMessage', ErrorMessage);
app.mount('#app');

### 3. 撰寫表單驗證頁面

<template>
  <v-form v-slot="{ errors }" @submit="OnSubmit">
    <label for="email" class="form-lable"> Email <input v-show="false"></label>
    <div class="mb-3">
        <v-field class="form-control" name="email"
        type="email" placeholder="請輸入Email"
        v-model="email" rules="email|required"
        :class="{ 'is-invalid': errors['email'] }"></v-field>
        <error-message name="email" class="invalid-feedback"></error-message>
      </div>
     <button class="btn btn-primary" type="submit">Submit</button>
  </v-form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
    };
  },
  methods: {
    OnSubmit() {
      console.log(this.email);
    },
  },
};
</script>