安装 vant-ui 实现底部导航栏 Tabbar

本例子使用vue3

介绍 vant-ui

地址：介绍 - Vant 4 (vant-ui.github.io)

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
 

使用

在新项目中使用，推荐使用 Rsbuild，Vite 或 Nuxt 框架。

官方示例项目

以下是 Vant 官方提供的一些示例项目，你可以克隆该项目，并直接拷贝代码来使用。

• vant-demo - rsbuild：使用 Vue 3、Vant 4、Rsbuild 搭建应用
• vant-demo - vite：使用 Vue 3、Vant 4、Vite 搭建应用
• vant-demo - nuxt3：使用 Vue 3、Nuxt 3、Vant 4 搭建应用。

引入组件

常规用法

//src\main.ts
//引入组件样式
import 'vant/lib/index.css'

const app = createApp(App)
app.mount('#app')

//src\views\tabs\TabsView.vue

//src\App.vue

非常规用法，即按需引入方法，请去官网查看

效果