五分钟带你学会Vant 4的使用

大家好，欢迎来到IT知识分享网。

前言

本章将从零开始讲解vant组件库的使用方法

对小白极其友好，主打的就是一个读者就是上帝，你只管张嘴，我把饭嚼碎了喂给你（坏笑）

那我们就直接开始吧！！！

效果展示

登录页面展示

主要结构：头像、输入框、提交按钮

Vant

使用一个东西之前我们先来了解一下他是个什么？

Vant 致力于为移动端开发者提供一套高质量、高性能的 UI 组件库,帮助他们快速搭建出色的移动端应用。凭借其优秀的性能和丰富的功能,Vant 已经成为业内广受欢迎的移动端 UI 解决方案之一

简短的一段话，你就能知道他的优秀之处了，高质量、高性能和快速！！！

代码实现

• 项目初始化

首先我们需要创建一个空的vue3项目

npm create vue@latest 

接下来构建我们的项目，只需要一路否就行，其他的我们也用不上

cd到项目文件夹下面后就可以去安装依赖了

• 引入vant

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

安装好依赖以后将vant引入到项目中

import { 
    createApp } from 'vue'; // 1. 引入你需要的组件 import { 
    Button } from 'vant'; // 2. 引入组件样式 import 'vant/lib/index.css'; const app = createApp(); // 3. 注册你需要的组件 app.use(Button); 

将这段代码引入到我们的vue中

现在我们的main.js的代码为

// 1. 引入你需要的组件 import { 
    Button } from "vant"; // 2. 引入组件样式 import "vant/lib/index.css"; import { 
    createApp } from "vue"; import App from "./App.vue"; const app = createApp(App); // 3. 注册你需要的组件 app.use(Button); app.mount("#app"); 

接下来我们修改App.vue的代码去使用Button组件

首先看一下官方文档，Button如何使用

明白以后就开始写咯

<van-button type="primary">主要按钮</van-button> <van-button type="success">成功按钮</van-button> <van-button type="default">默认按钮</van-button> <van-button type="danger">危险按钮</van-button> <van-button type="warning">警告按钮</van-button> 

修改以后得App.vue的代码

<template> <van-button type="primary">主要按钮</van-button> </template> <script setup></script> <style lang="less" scoped></style> 

这样我们就成功的引入了vant了

接下来我们去分析一下页面的布局

一个头像框、一个输入框

输入框就可以使用vant快速的实现

我们只需要使用基础表单就可以实现我们的效果了

通过以下方式来全局注册组件

import { 
    createApp } from 'vue'; import { 
    Form, Field, CellGroup } from 'vant'; const app = createApp(); app.use(Form); app.use(Field); app.use(CellGroup); 

接下来就可以去使用了

表单的基础用法

<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> 

然后就可以写这个页面的代码了

这里我们使用到了less，所以我们需要去引入一下

npm i less -D 

然后就是基础的页面的书写了

<template> <div class="login"> <h1>登录</h1> <div class="login-wrappe"> <div class="avatar"> <img src="https://i.gifer.com/4tym.gif" 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></script> <style lang="less" scoped> .login { 
    width: 100vw; height: 100vh; background-color: #fff; padding: 0 0.3rem; box-sizing: border-box; overflow: hidden; // 溢出隐藏.让其变为bfc容器 h1 { 
    height: 0.6933rem; text-align: center; font-size: 0.48rem; margin-top: 1.12rem; } .login-wrappe { 
    width: 7.44rem; height: 10.77rem; border: 1px solid #ccc; margin: 0 auto; margin-top: 1.7rem; border-radius: 0.3rem; box-shadow: -0.25rem 0.25rem 0.6rem rgb(115, 115, 115); .avatar { 
    width: 2.4rem; height: 2.4rem; margin: 1rem auto 0.77rem; overflow: hidden; img { 
    width: 100%; } } } } :deep(.van-cell__title.van-field__label) { 
    width: 45px; } </style> 

1. 模板 (template) : 这个组件包含一个大的 div 容器,内部包含一个标题 h1、一个头像 div、以及一个 van-form 表单。表单内部使用了 van-cell-group 和 van-field 组件来展示用户名和密码输入框。最后还有一个提交按钮。
2. 脚本 (script) : 这个组件使用了 setup 语法糖,所以没有在 script 标签中定义任何数据或方法。
3. 样式 (style) : 这个组件使用了 less 作为预处理器,定义了整个登录界面的样式。主要包括页面背景颜色、标题样式、表单容器样式、头像样式等。另外还使用了 :deep() 来调整 Vant 组件的样式。

js部分的书写

import { 
    ref } from "vue"; import http from "@/api/index"; const username = ref(""); const password = ref(""); const onSubmit = (values) => { 
    http .post("/user/login", { 
    username: values.username, password: values.value, }) .then((res) => { 
    console.log(res); }); }; 

1. 定义状态变量:
   • username: 用户名输入框的值。
   • password: 密码输入框的值。
2. 定义事件处理函数 onSubmit:
   • 这个函数会在表单提交时被调用。
   • 它使用 http.post() 方法向后端 API 发送登录请求,传递 username 和 password 作为请求参数。
   • 在请求成功后,会打印出服务器返回的响应数据。

接下来我们就实现了页面的构建

可见使用vant去构建页面是非常快的，vant组件库基本涵盖了我们开发移动端的绝大部分要使用的组件

总结

本文讲解了如何去使用vant组件库去快速构建你的移动端项目

对小白极其友好，主打的就是一个读者就是上帝，你只管张嘴，我把饭嚼碎了喂给你（坏笑）

希望看到这里的你能够有所收获！！！！！！