Vant组件库的初始与使用

前言

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

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

官网地址：Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.

通过这片文章，将帮助您了解Vant的安装与简单使用

---

一、安装

通过npm安装

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

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

# Vue 2 项目，安装 Vant 2
npm i vant@latest-v2

当然，你也可以通过 yarn、pnpm 或 bun 进行安装：

# 通过 yarn 安装
yarn add vant

# 通过 pnpm 安装
pnpm add vant

# 通过 Bun 安装
bun add vant

二、引入组件

在完成了项目的创建后，我们可以在项目下引入组件

下面是使用 Vant 组件的用法示例：

import { createApp } from 'vue';
// 1. 引入你需要的组件
import { Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';

const app = createApp();

// 3. 注册你需要的组件
app.use(Button);

上面的引入属于全局注册，在vant中，可以使用局部注册在当前组件中使用注册的组件

import { Button } from 'vant';

export default {
  components: {
    [Button.name]: Button,
  },
};

<script setup>

在 <script setup> 中可以直接使用 Vant 组件，不需要进行组件注册。

<script setup>
  import { Button } from 'vant';
</script>

<template>
  <Button />
</template>

完成了注册后，我们就可以在模板中直接使用Vant组件了