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

通过 yarnpnpm 或 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
<script setup lang="ts">
//引入你需要的组件
import { Tabbar, TabbarItem } from 'vant'
import { ref } from 'vue'//记录当前选择的 tab
const active = ref('home')</script><template><div class="center">{{ active }}</div><Tabbar v-model="active"><TabbarItem name="home" icon="home-o">首页</TabbarItem><TabbarItem name="order" icon="bars">订单</TabbarItem><TabbarItem name="me" icon="contact">我的</TabbarItem></Tabbar>
</template><style>
.center {text-align: center;
}
</style>
//src\App.vue
<script setup lang="ts">
// 展示组件
import TabsView from './views/tabs/TabsView.vue';
</script><template><TabsView></TabsView>
</template>
非常规用法,即按需引入方法,请去官网查看
效果 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/657748.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

选型 之 工业相机篇

一、概述 23年24年行情不会好&#xff0c;公司各种想办法裁员&#xff0c;在大陆这个大熔炉中只能不断地提炼。我个人主要是在工业领域做2D图像算法和3D算法&#xff0c;但是现在出去都需要全能人才 方案、算法、运动控制等&#xff0c;我目前最大的短板就是方案&#xff0c;在…

【Javaweb程序设计】【C00165】基于SSM的高考志愿辅助填报系统(论文+PPT)

基于SSM的高考志愿辅助填报系统&#xff08;论文PPT&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于ssm的高考志愿辅助填报系统 本系统分为前台系统模块、后台管理员模块以及后台学生模块 前台系统模块&#xff1a;当游客打开系统的网址后&…

跟着cherno手搓游戏引擎【11】静态库、警告消除(渲染预热)

premake修改&#xff1a; SRC下的premake workspace "YOTOEngine" -- sln文件名architecture "x64" configurations{"Debug","Release","Dist"} startproject "Sandbox" -- https://github.com/premake/premak…

wrappedComponentRef和ref的区别

wrappedComponentRef 是在使用高阶组件 (Higher-Order Component) 包装组件时的一个 prop&#xff0c;它用于引用被包装的组件实例。 ref 是 React 提供的用于访问 DOM 元素或者组件实例的属性。在创建组件时&#xff0c;可以给组件添加一个 ref 属性&#xff0c;然后通过该属…

springboot(ssm拍卖管理系统 在线竞拍拍卖系统Java系统

springboot(ssm拍卖管理系统 在线竞拍拍卖系统Java系统 开发语言&#xff1a;Java 框架&#xff1a;springboot&#xff08;可改ssm&#xff09; vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#…

springboot中获取配置文件中属性值的几种方式

目录 第一章、使用Value注解第二章、使用PropertySource注解第三章、使用Configurationproperties注解第四章、使用Java Properties类第五章、使用Environment接口 友情提醒: 先看文章目录&#xff0c;大致了解文章知识点结构&#xff0c;点击文章目录可直接跳转到文章指定位置…

DC-磁盘管理(23国赛真题)

2023全国职业院校技能大赛网络系统管理赛项–模块B:服务部署(WindowServer2022) 文章目录 题目配置步骤组成RAID 5,磁盘分区命名为卷标H盘:Raid5。手动测试破坏一块磁盘,做RAID磁盘修复,确认RAID 5配置完毕。验证查看Raid5(打开磁盘管理器,查看raid信息)Raid5磁盘修复…

JavaEE学习笔记 2024-1-25 --VUE的入门使用

上一篇 个人整理非商业用途&#xff0c;欢迎探讨与指正&#xff01;&#xff01; 文章目录 14.VUE基础14.1VUE的入门使用14.2条件判断14.3循环渲染14.4v-bind绑定标签属性14.5v-model表单标签的双向绑定14.6事件处理14.7axios 14.VUE基础 前端框架 UI框架:页面渲染Bootstrap,L…

Android 车联网——CarMediaService介绍(十九)

一、简介 CarMediaService 是安卓汽车平台中的一个服务,用于管理和控制车辆媒体系统的播放和音频功能。该服务允许车主和乘客通过车辆媒体系统访问音乐、广播、播客等媒体内容,并提供了一系列功能来控制和管理这些媒体资源。 主要功能 媒体播放控制:该服务允许车主和乘客通…

判断是否是IE浏览器

在我们开发页面中总会遇到解决兼容问题&#xff0c;一般通过css hack根据不同浏览器写不同的css,或者判断浏览器加载不同的模块。在这里我们将分享判断ie的方法 一、IE条件注释&#xff08;h5方法&#xff09; IE的判断写法只兼容到IE9&#xff0c;IE10及其以上只能显示非IE的…

Python中如何使用urllib3进行http请求 (一)

Urllib3是什么以及为什么使用它&#xff1f; Urllib3是一个强大且用户友好的Python HTTP客户端。它被设计用来替代默认的Python库进行HTTP请求的urllib2。相比于urllib2&#xff0c;Urllib3具有许多优势&#xff0c;包括连接池、线程安全和对HTTP/1.1的支持。此外&#xff0c;…

Coremail启动鸿蒙原生应用开发,打造全场景邮件办公新体验

1月18日&#xff0c;华为在深圳举行鸿蒙生态千帆启航仪式&#xff0c;Coremail出席仪式并与华为签署鸿蒙合作协议&#xff0c;宣布正式启动鸿蒙原生应用开发。作为首批拥抱鸿蒙的邮件领域伙伴&#xff0c;Coremail的加入标志着鸿蒙生态版图进一步完善。 Coremail是国内自建邮件…

编程笔记 html5cssjs 068 JavaScrip Boolean数据类型

编程笔记 html5&css&js 068 JavaScrip Boolean数据类型 一、Boolean数据类型二、运算符三、代码示例小结 JavaScript中的Boolean数据类型详解及示例。在JavaScript中&#xff0c;Boolean&#xff08;布尔&#xff09;数据类型是一种基本数据类型&#xff0c;它有两个可…

使用golang发送邮件

目前大多应用都是手机登录&#xff0c;但是作为开源的一个软件&#xff0c;或者是私有的一个应用&#xff0c;那么使用手机短信接收验证码成本比较高&#xff0c;使用邮箱相对更容易&#xff0c; 这里从tinode中取出发邮件的部分做一个测试&#xff0c; 其中邮箱一般需要设置…

Unity异步加载场景

前言 Unity中常见的加载场景就是异步加载场景&#xff0c;此博客对异步加载场景进行详细介绍 简单易懂好用。含有加载进度&#xff0c;加载动画等。&#xff08;文末附工程&#xff09; 代码分析 主要脚本MaskPanel &#xff0c;作为单例存在于场景中&#xff0c;下面对此脚…

Angular组件(二) 分割面板ShrinkSplitter

Angular组件(二) 分割面板ShrinkSplitter 前言 在Angular组件(一) 分割面板ShrinkSplitter文章中我们实现了Splitter组件&#xff0c;后来在业务场景中发现在开关右侧容器和底部容器时&#xff0c;使用起来不方便&#xff0c;ngModel绑定的值始终是左侧容器和顶部容器的大小&…

Flutter App 生命周期观察监听

前言 本文主要讲解两种 Flutter生命周期观察监听 方式一&#xff1a;Flutter SDK 3.13 之前的方式&#xff0c;WidgetsBindingObserver&#xff1b; 方式二&#xff1a;Flutter SDK 3.13 开始的新方式&#xff0c;AppLifecycleListener&#xff1b; 测试平台&#xff1a;IO…

走进水稻种植教学基地可视化:科技与农业知识的完美结合

随着科技的不断发展&#xff0c;农业领域也在不断创新和进步。水稻种植教学基地可视化系统是一种基于现代信息技术手段的教学方式&#xff0c;通过虚拟现实、3D建模等技术&#xff0c;将水稻种植的全过程进行模拟和展示。这种教学方式打破了传统农业教学的局限性&#xff0c;使…

idea中yml文件没有提示解决办法

两步解决yml文件不显示提示&#xff0c;yaml文件显示提示问题 1、在插件中心&#xff0c;先下载下图两个插件 2、在Editor》File Types新增文件类型&#xff0c;文件名匹配规则需要将yaml和yml的都加上&#xff0c;加好之后&#xff0c;重启idea&#xff0c;即刻生效。

专利背后的故事 | 一种基于FTP文件的下载方法

Part 01 专利发明的初衷 FTP下载工具俗称为FTP工具&#xff0c;是我们常用的一个服务。FTP分为客户端和服务器端&#xff1a;FTP服务器被用于存储文件&#xff1b;FTP客户端用于通过FTP协议访问位于FTP服务器端上的资源&#xff0c;可以上传和下载文件。 在现实使用中可能会…