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

前言

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

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

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

效果展示

登录页面展示

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

Vant

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

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

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

代码实现

• 项目初始化

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

npm create vue@latest 

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

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

接下来我们就去引入vant的依赖
Vant 4 - 轻量、可定制的移动端组件库 (vant-ui.github.io)

• 引入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">默认按钮