安装：
yarn add vee-validate配置：
在main.js中引入vee-validate
// 引入表单验证
import VeeValidate, {
Validator
} from 'vee-validate'
Vue.use(VeeValidate, {
fieldsBagName: 'vee-fields'
})// 汉化表单验证
import zhCN from 'vee-validate/dist/locale/zh_CN'
Validator.localize('zh_CN',
zhCN)
修改login.vue 添加表单验证，以用户名为例，我的要求是用户名不能为空，添加的规则如下：
<el-input
v-model="form.name"
v-validate="{required:true}"
name="name"
:class="{'is-danger':errors.has('name')}"
data-vv-as="用户名"
placeholder="请输入用户名"
></el-input> v-validate 里配置的是验证规则
name 是字段名称，这个名称可以自己定
is-danger 是我为报错的字段配置的一个class名，如果erros.has(字段名)不为空，则说明验证没通过，就添加该class。
is-danger 样式如下，把错误表单的边框设置成红色，目的是为了突出显示错误信息。至于为什么加
/deep/ 前缀，是因为
el-input 组件是element组件，我们在
style 中设置的样式是局部的，没法应用的到element子组件上，所以需要加上/deep/。需不需要加你自己视情况而定。
/deep/ .is-danger input {
border-color: #ff3860;
}接下来，我们要考虑错误信息怎么显示。我的做法是直接在表单下显示错误信息就可以，缺点是如果错误信息很多，每个输入框都有一个错误信息的话，表单就会变得很高。
因为每个输入框都要显示错误信息，所以我觉得把显示错误信息的功能做成组件比较好，这样可以通用，省了很多重复代码。
在components文件夹下新建common文件夹，再在commen文件夹下新建
FormErrorMessage.vue 组件代码如下：
<template>
<div class="help is-danger">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'FormErrorMessage'
}
</script>
<style scoped>
.help {
font-size: 0.75rem;
margin-top: 0.25rem;
line-height: 0.75rem;
}.help.is-danger {
color: #ff3860;
}
</style>
在Login.vue中引入
import FormErrorMessage from '../components/common/FormErrorMessage.vue'在components中配置
