安装vant UI框架：
cnpm install vant –-save-dev
导入组件-在main.js里：
import Vant from 'vant';
import'vant/lib/vant-css/index.css';
Vue.use('Vant')
Field输入框是一个高频组件
完全支持Input 标签所有的原生属性，比如 maxlength、placeholder、autofocus 等
准备工作：
创建一个页面: Field.vue
在router.js里配置Field页面的路由
{
path: '/field',
name: 'field',
component: () => import('./views/Field.vue')
}
在index.vue里添加一项
代码演示Field输入框：
基础用法：
普通的一个小示例，只有一个label标签，和一个输入框：
<van-cell-group>
<van-field
v-model="value"
placeholder="请输入用户名"
label="用户名"
/>
</van-cell-group>
我们还可以给他们增加些修饰，比如在label前面加个icon，在输入框尾部加个icon，还可以点击右侧的icon做一个交互
通常项目里点击icon会弹出一个弹出框，这里我们暂且就toast一个轻提示：
<van-cell-group>
<van-field
v-model="value"
placeholder="请输入用户名"
label="用户名"
left-icon="contact"
icon="question"
@click-icon="$toast('question')"
/>
</van-cell-group>
错误提示一共有两种，一种是在输入框里显示错误提示，另一种是在输入框下方显示错误提示
在输入框里显示错误提示如下：
<van-cell-group>
<van-field
v-model="value"
placeholder="请输入用户名"
label="用户名"
left-icon="contact"
icon="question"
@click-icon="$toast('question')"
error
/>
</van-cell-group>
错误提示在输入框下面展示如下：
<van-cell-group>
<van-field
v-model="value"
placeholder="请输入用户名"
label="用户名"
left-icon="contact"
icon="question"
@click-icon="$toast('question')"
error-message="输入不正确噢"
/>
</van-cell-group>
还有一个高频用法，就是发送验证码的用法
这就用到了组件的扩展-slot
slot的值有4个，label，left-icon，icon，button
相当于是代表在4个位置上进行自定义
在DOM里完整的代码如下：
<van-cell-group style="line-height: 60px;">
<van-field
v-model="value"
placeholder="请输入用户名"
label="用户名"
left-icon="contact"
>
<van-button slot="button" type="primary" size="small">发送验证码</van-button>
</van-field>
</van-cell-group>
如果有对不齐的情况，可以在浏览器里查看Elements找对应的class，在css样式里进行修改即可