前言

最近写一个移动端的项目，用到了vant做UI界面设计，不得不再次感叹开源的力量，这个组件库封装的实在是太优雅了，只要你愿意看官方文档，就不会担心看不懂，也不会担心不会用，接下来就带大家去浅尝一下这个组件库。官网文档：Vant 4 - 轻量、可定制的移动端组件库 (vant-ui.github.io)

Vant

Vant 是一个轻量、可定制的移动端组件库，于 2017 年开源。

可以看到，移动端，用来做移动端的ui界面。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

特性

• 
  
• 🚀 性能极佳，组件平均体积小于 1KB（min+gzip）
  
• 🚀 80+ 个高质量组件，覆盖移动端主流场景
  
• 🚀 零外部依赖，不依赖三方 npm 包
  
• 💪 使用 TypeScript 编写，提供完整的类型定义
  
• 💪 单元测试覆盖率超过 90%，提供稳定性保障
  
• 📖 提供丰富的中英文文档和组件示例
  
• 📖 提供 Sketch 和 Axure 设计资源
  
• 🍭 支持 Vue 2、Vue 3 和微信小程序
  
• 🍭 支持 Nuxt 2、Nuxt 3，提供 Nuxt 的 Vant Module
  
• 🍭 支持主题定制，内置 700+ 个主题变量
  
• 🍭 支持按需引入和 Tree Shaking
  
• 🍭 支持无障碍访问（持续改进中）
  
• 🍭 支持深色模式
  
• 🍭 支持服务器端渲染
  
• 🌍 支持国际化，内置 30+ 种语言包
  

没错，这是官网复制来的介绍。

那么从官方文档可以看到目前这是Vant4.x，适用于vue3，如果你用的是vue2，那么就用Vant2。我们切换到快速上手，就能看到如何快速入门使用

Vant使用

1.安装

在现有项目中使用 Vant 时，可以通过 npm 进行安装：

# Vue 3 项目，安装最新版 Vant

npm i vant

# Vue 2 项目，安装 Vant 2

npm i vant@latest-v2

看得出来，非常优雅，最新版直接安装vant，如果不是最新的才加了些-2...

当然，你也可以通过 yarn、pnpm 或 bun 进行安装：什么方式都有，大家可以自己参照官方文档。

# 通过 yarn 安装

yarn add vant

# 通过 pnpm 安装

pnpm add vant

# 通过 Bun 安装

bun add vant

那么引入之后如何使用呢？我们常常需要做一个登陆注册页面，看看有了vant组件库之后，我们还需要去切页面吗？

此处我们需要放一个表单，接下来我们查阅官方文档，看看vant的表单如何使用。

2.引入

写的很清楚，表单会用到三个组件，我们只需要从vant库中引入这三个组件，然后都use掉即可

import { createApp } from 'vue';
import { Form, Field, CellGr0up } from 'vant';

const app = createApp();

app.use(Form);

app.use(Field);

app.use(CellGr0up);

引入之后，就可以在我们需要用到表单的页面使用了。直接将他写好的表单复制到我们的代码中

<van-form @submit="onSubmit">
<van-cell-group inset>
<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: '请填写密码' }]"

    />
</van-cell-group>
<div style="margin: 16px;">
<van-button round block type="primary" native-type="submit">

      提交
</van-button>
</div>

</van-form>

可以看到，它使用了v-model双向绑定，因此我们就需要自己去定义一个username、passwor...看需要用到什么，然后官方文档就直接了当告诉我们了这些变量

import { ref } from 'vue';

export default {
setup() {
const username = ref('');
const password = ref('');
const onSubmit = (values) => {
console.log('submit', values);

    };

return {

      username,

      password,

      onSubmit,

    };

  },

};

• 
  
• 注意他这里提交表单事件，直接接收了一个参数values，事实上这个values可以直接通过values.name，我们input框上的name属性代表的input框拿到的数据，在这里其实就是values.用户名，所以我们可以直接改成英文，如：values.username。
  

在官方文档上也能看见他的样式，甚至可以做校验

除此之外，再介绍一个，例如微信中点击某个东西成功之后，就会弹出一个弹出框，打勾，或者失败，如果这么一个UI界面要我们自己去写可能多少也有点麻烦，但是vant都给我们封装好了

引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

import { createApp } from 'vue';
import { Toast } from 'vant';

const app = createApp();

app.use(Toast);

显然就是引入一个封装好了的Toast组件，然后use掉，vant官方都给我们想好了，一般这种弹出提示框都是我们js中做判断，如果成功就弹出，因此一般都出现在函数里面，官方就直接给我们打造了函数调用的方式

import { showToast } from 'vant';

showToast('提示内容');

全局引入依赖之后，在js中直接引入，然后直接调用就能出现效果，帮助咱们切图仔省去了不少麻烦事儿。

除了成功、失败，他甚至可以自定义写图标，也是极度舒适了。

看看我的登录页面是如何使用的：

<template>
<div class="login">
<h1>登录</h1>
<div class="login-wrapper">
<div class="avatar">
<img src="https://q6.itc.cn/q_70/images03/20240601/80b789341c9b45cb8a76238650d288a5.png" alt="">
</div>

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

                        登录
</van-button>
</div>
</van-form>


</div>
</div>
</template>

<script setup>
import { ref } from 'vue'
import axios from '@/api/index.js'
const password = ref('')
const username = ref('')
// 登录
const onSubmit = (values) => {
// console.log(values); // 用户输入的账号和密码对象 name作为key
// 发送接口请求给后端 校验数据 

    axios.post('/user/login', {
username: values.username,
password: values.password

    }).then((res) => {
console.log(res);

    })

}
</script>

<style lang="less" scoped>
.login {
width: 100vw;
height: 100vh;
background-color: #fff;
padding: 0 0.3rem;
box-sizing: border-box;
overflow: hidden;

h1 {
height: 0.6933rem;
text-align: center;
font-size: 0.48rem;
margin-top: 1.12rem;

    }

.login-wrapper {
width: 7.44rem;
height: 10.77rem;
border: 1px solid rgba(187, 187, 187, 1);
margin: 0 auto;
margin-top: 1.7rem;
border-radius: 0.3rem;
box-shadow: 0 0 0.533rem rgba(170, 170, 170, 1);

.avatar {
width: 2.4rem;
height: 2.4rem;
margin: 1rem auto 0.77rem auto;
border-radius: 50%;
overflow: hidden;

img {
width: 100%;

            }

        }

    }

}


:deep(.van-cell__title.van-field__label) {
width: 45px;

}
</style>

非常方便，跟着上述步骤，官方文档写的很清楚，直接贴上去就实现了，然后自己再加一些less样式。

那么其他的就不做过多介绍了，大家在做项目需要用到一些东西的时候，直接查阅官方文档，直接拿去用即可。Vant 4 - 轻量、可定制的移动端组件库 (vant-ui.github.io)

在这里我写的都是rem单位，目的是做移动端的适配，根据宽度调整fontsize的大小，其实也可以通过vant封装好的移动端适配组件来做，这里不做过多介绍了。

小结

Vant 是一个轻量、可靠的移动端组件库，可用于快速构建风格统一的移动端 UI 界面。它提供了一系列高质量的组件，涵盖了导航、表单、按钮、列表、轮播图等常用功能。

我们只需要安装依赖后引入依赖还有在全局中引入他的整份css代码，最后按需取组件，就能轻松完成ui界面设计。