17 vant

一Vant组件库

Vant组件库: https://vant-contrib.gitee.io/vant/#/zh-CN/

1 什么事组件？
是一个vue文件，里边封装了样式，js

2 什么是vant组件库?
封装了很多的组件, 支持移动项目中大多数使用场景

二 全部引入

参考 快速使用: https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

如何引入Vant组件库?
组件库是一个包, 先下载
按照文档指引, 在main.js全局注册
到某.vue内直接使用Vant组件名

2.1 先创建一个项目

2.2 安装vant

# 通过 yarn 安装yarn add vant

看是否下载成功：

2.3 引入组件

2.4 使用

三 按需引入-手动

Vant组件库如何手动按需引入使用?
import 从vant库里引出某个组件
import 单独引出样式
在当前页面注册此组件名即可

四 自动按需引入

参考：Vant 2 - 轻量、可靠的移动端组件库 (gitee.io)

步骤：

4.1# 安装插件npm i babel-plugin-import -D

4.2 babel.config.js - 添加官网说的配置 (一定要重启服务器)

4.3 main.js 按需引入某个组件, Vue.use全局注册 - 某个.vue文件中直接使用vant组件

五 弹出框使用案例

想使用某个UI界面时怎么办?
去文档查找相关例子
然后根据步骤和提示使用即可

例如：

参考：Vant 2 - 轻量、可靠的移动端组件库 (gitee.io)

六 表单使用案例

参考：Vant 2 - 轻量、可靠的移动端组件库 (gitee.io)

1 引入

2 使用

<template>
  <div>
    <van-form @submit="onSubmit">
      <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]" />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>

export default {

  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    onSubmit(values) { // 表单提交事件, values收集表单里的值
      console.log('submit', values);
    }

  },
};
</script>

<style></style>