当前位置: 首页 > news >正文

怎么在Vue3项目中引入Vant组件库并使用?

文章目录

  • 前言
  • 一、项目中使用步骤
    • 1.安装:
    • 2.样式的导入(2种方法)
      • 2.1 main.ts全局导入(平常自己的项目用的这个全局)
      • 2.2 按需引入组件样式 (简单介绍一下)
        • 1.安装插件
        • 2.配置插件
    • 3.组件按需使用:App.vue
  • 总结

前言

在Vue 3项目中,Vant是一个轻量、可靠的移动端Vue组件库,它基于Vue 3开发,提供了一套丰富的UI组件,非常适合用于构建移动端的应用。以下是如何在Vue 3项目中引入和使用Vant组件库的步骤:


一、项目中使用步骤

1.安装:

代码如下(示例):

# Vue 3 项目,安装最新版 Vant
npm i vant
# 通过 yarn 安装
yarn add vant
# 通过 pnpm 安装
pnpm add vant

2.样式的导入(2种方法)

2.1 main.ts全局导入(平常自己的项目用的这个全局)

代码如下(示例):

import { createApp } from 'vue'
import App from './App.vue'
import pinia from './stores'
import router from './router'
// 样式全局使用
import 'vant/lib/index.css'
import './styles/main.scss'const app = createApp(App)app.use(pinia)
app.use(router)
app.mount('#app')

2.2 按需引入组件样式 (简单介绍一下)

在基于 Rsbuild、Vite、webpack 或 vue-cli 的项目中使用 Vant 时,可以使用 unplugin-vue-components 插件,它可以自动引入组件。

Vant 官方基于 unplugin-vue-components 提供了自动导入样式的解析器 @vant/auto-import-resolver,两者可以配合使用。

相比于常规用法,这种方式可以按需引入组件的 CSS 样式,从而减少一部分代码体积,但使用起来会变得繁琐一些。如果业务对 CSS 的体积要求不是特别极致,我们推荐使用更简便的常规用法。

1.安装插件
# 通过 npm 安装
npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D# 通过 yarn 安装
yarn add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D# 通过 pnpm 安装
pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D# 通过 bun 安装
bun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
2.配置插件

如果是基于 Vite 的项目,在 vite.config.js 文件中配置插件:
配置完成后,unplugin-auto-import 会自动导入对应的 Vant API 以及样式。

import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';export default {plugins: [vue(),AutoImport({resolvers: [VantResolver()],}),Components({resolvers: [VantResolver()],}),],
};

3.组件按需使用:App.vue

<script setup lang="ts">
import { Button as VanButton } from 'vant'
</script><template><van-button>按钮</van-button>
</template><style scoped></style>

总结

现在,你已经成功地在Vue 3项目中引入了Vant组件库,你可以开始在你的组件中使用这些组件了。例如,你可以使用Vant提供的按钮、对话框、列表等组件来构建你的用户界面。

相关文章:

怎么在Vue3项目中引入Vant组件库并使用?

文章目录 前言一、项目中使用步骤1.安装&#xff1a;2.样式的导入&#xff08;2种方法&#xff09;2.1 main.ts全局导入&#xff08;平常自己的项目用的这个全局&#xff09;2.2 按需引入组件样式 (简单介绍一下)1.安装插件2.配置插件 3.组件按需使用&#xff1a;App.vue 总结 …...

springboot中有哪些方式可以解决跨域问题

文章目录 什么是跨域解决方案CrossOrigin注解实现WebMvcConfigurer接口CorsFilter过滤器如何选择&#xff1f; 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 Talk is cheap &#xff0…...

Temporal Dynamic Quantization for Diffusion Models阅读

文章目录 AbstractIntroductionBackgrounds and Related Works2.1 扩散模型2.2 量化2.3 量化感知训练和训练后量化 TemporalDynamic Quantization3.1 量化方法3.2 扩散模型量化的挑战3.3 TDQ模块的实现3.4 工程细节时间步的频率编码TDQ模块的初始化 Experimental SetupResults5…...

828华为云征文|华为云Flexus X实例性能实测:速度与稳定性的完美结合

828华为云征文&#xff5c;华为云Flexus X实例性能实测&#xff1a;速度与稳定性的完美结合 前言一、Flexus云服务器X实例介绍1.1 Flexus云服务器X实例简介1.2 Flexus云服务器X实例特点1.3 Flexus云服务器X实例使用场景 二、实践环境介绍2.1 本次实践环境规划2.2 本次实践介绍 …...

【PyTorch】图像分割

图像分割是什么 Image Segmentation 将图像每一个像素分类 图像分割分类 超像素分割&#xff1a;少量超像素代替大量像素&#xff0c;常用于图像预处理语义分割&#xff1a;逐像素分类&#xff0c;无法区分个体实例分割&#xff1a;对个体目标进行分割全景分割&#xff1a;…...

如何快速建立自己的异地互联的远程视频监控系统,通过web浏览器可以直接查看公网上的监控视频(上)

目录 一、需求 二、方案 2.1、计划方案 2.2、实施准备 2.2.1所需配置的产品和服务 2.2.1.1云主机 &#xff08;1&#xff09;选择云平台 &#xff08;2&#xff09;配置云服务器 2.2.2.2视频监控平台软件 &#xff08;1&#xff09;视频监控平台软件 &#xff08;2&am…...

实验2思科网院项目2.7.2-packet-tracer---configure-single-area-ospfv2---实践练习

实践练习 2.7.2-packet-tracer---configure-single-area-ospfv2---实践练习physical-mode 实验拓扑 相关设备配置 实验目标: 第 1 部分&#xff1a;构建网络并配置设备的基本设置 第 2 部分&#xff1a;配置和验证单区域 OSPFv2 的基本部署 第 3 部分&#xff1a;优化和验…...

Nginx实战经验分享:从小白到专家的成长历程!

目录 一、Nginx概述1、Nginx简介&#xff08;1&#xff09;事件驱动模型&#xff08;2&#xff09;异步处理&#xff08;3&#xff09;模块化设计&#xff08;4&#xff09;高性能&#xff08;5&#xff09;反向代理&#xff08;6&#xff09;负载均衡&#xff08;7&#xff09…...

从画质设置看游戏引擎(其一)

前往我的博客&#xff0c;获取无广告&#xff0c;更好的阅读体验 1. 抗锯齿&#xff08;Anti-Aliasing&#xff09; 1.1 锯齿问题的起因 在三维模型的世界中&#xff0c;模型是连续的&#xff0c;但是屏幕像素是不连续&#xff0c;是离散的&#xff1b; 即当一个圆形显示在显…...

#git 问题failed to resolve head as a valid ref

问题如下&#xff1a; 解决方法&#xff1a; 1、运行 git fsck --full 可以查看具体error信息&#xff0c;一般都是head索引问题 2、.git\refs\heads\xxx&#xff08;当前分支&#xff09;txt编辑器打开显示乱码&#xff0c;而不是hash编码 3、在.git\logs\refs\heads\xxx&a…...

YOLOv11,地瓜RDK X5开发板,TROS端到端140FPS!

YOLOv11 Detect YOLOv11 Detect YOLO介绍性能数据 (简要) RDK X5 & RDK X5 Module 模型下载地址输入输出数据公版处理流程优化处理流程步骤参考 环境、项目准备导出为onnxPTQ方案量化转化使用hb_perf命令对bin模型进行可视化, hrt_model_exec命令检查bin模型的输入输出情况…...

Python精选200Tips:181-182

针对图像的经典卷积网络结构进化史及可视化 针对图像的经典卷积网络结构进化史及可视化&#xff08;续&#xff09;P181--MobileNet【2017】模型结构及创新性说明模型结构代码MobileNet V1版本MobileNet V2版本MobileNet V3 版本Small版本Large版本 P182--EfficientNet【2019】…...

SpringCloud 配置 feign.hystrix.enabled: true 不生效

SpringCloud 配置 feign.hystrix.enabled: true 不生效的原因 feign 启用 hystrix feign 默认没有启用 hystrix&#xff0c;添加配置&#xff0c;启用 hystrix feign.hystrix.enabledtrue application.yml 添加配置 feign:hystrix:enabled: true启用 hystrix 后&#xff0c;访…...

9.24-k8s服务发布

Ingress 使用域名发布 K8S 服务 部署项目 一、先部署mariadb [rootk8s-master ~]# mkdir aaa [rootk8s-master ~]# cd aaa/ [rootk8s-master aaa]# # 先部署mariadb [rootk8s-master aaa]# # configmap [rootk8s-master aaa]# vim mariadb-configmap.yaml apiVersion: v1 ki…...

UI设计师面试整理-作品集展示

在UI设计师的面试中,作品集展示是非常关键的一环。它不仅展示了你的设计技能和风格,也让面试官了解你的设计思维和解决问题的能力。下面是如何有效地准备和展示你的作品集的建议: 1. 选择合适的项目 ● 多样性:选择能展示你在不同领域或平台上的设计能力的项目。确保作品集…...

CMU 10423 Generative AI:lec10(few-shot、提示工程、上下文学习)

文章目录 1 概述2 摘录2.1 zero-shot 和 few-shot一、Zero-shot Learning&#xff08;零样本学习&#xff09;特点&#xff1a;工作原理&#xff1a;优点&#xff1a;缺点&#xff1a; 二、Few-shot Learning&#xff08;少样本学习&#xff09;特点&#xff1a;工作原理&#…...

做数据抓取工作要如何选择ip池

选择合适的IP池对于数据抓取工作至关重要。一个优质的IP池可以提高抓取的效率和成功率&#xff0c;同时减少被目标网站封禁的风险。以下是选择IP池时需要考虑的一些关键因素&#xff1a; 1. IP类型 住宅IP&#xff1a;住宅IP通常来自真实用户&#xff0c;难以被识别为代理。它…...

防止电脑电池老化,禁止usb或者ac接口调试时充电

控制android系统&#xff0c;开发者模式&#xff0c;开启和禁止充电 连接 Android 手机到电脑的 USB 端口。 下载并安装 Android Debug Bridge (ADB) 工具[1]。 USB&#xff1a; 在命令行中输入 adb shell dumpsys battery set usb 0&#xff0c;以禁止 USB 充电。 在命令…...

智权半导体/SmartDV力助高速发展的中国RISC-V CPU IP厂商走上高质量发展之道

作者&#xff1a;Karthik Gopal SmartDV Technologies亚洲区总经理 智权半导体科技&#xff08;厦门&#xff09;有限公司总经理 进入2024年&#xff0c;全球RISC-V社群在技术和应用两个方向上都在加快发展&#xff0c;中国国内的RISC-V CPU IP提供商也在内核性能和应用扩展…...

利用vue-capper封装一个可以函数式调用图片裁剪组件

1. 效果 const cropData await wqCrop({prop:{img,autoCrop: true, // 是否开启截图框maxImgSize: 600,autoCropWidth: 30,canMove: true, // 图片是否可移动canMoveBox: true, // 截图框是否可移动fixedBox: false, // 截图框是否固定}});console.log(cropData);使用wqCrop会…...

快马平台快速原型:十分钟用AI生成你的第一个龙虾养殖系统Docker部署方案

最近在研究如何用Docker快速搭建一个龙虾养殖模拟系统&#xff0c;发现用InsCode(快马)平台可以大大简化这个过程。作为一个快速原型验证工具&#xff0c;它让我在十分钟内就完成了从构思到部署的全流程。下面分享下我的实践心得&#xff1a; 项目构思阶段 这个模拟系统需要展示…...

LeetCode 2946. 循环移位后的矩阵相似检查【数学周期性+原地比较】简单

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…...

Charticulator:数据可视化的自由创作平台与技术革命

Charticulator&#xff1a;数据可视化的自由创作平台与技术革命 【免费下载链接】charticulator Interactive Layout-Aware Construction of Bespoke Charts 项目地址: https://gitcode.com/gh_mirrors/ch/charticulator 当数据分析师面对预设模板无法表达复杂数据关系时…...

RT-Thread Nano 3.0.3移植STM32F103后,第一个实战:用FinSH组件实现串口命令行调试

RT-Thread Nano 3.0.3移植STM32F103实战&#xff1a;FinSH组件实现串口命令行调试 当你成功将RT-Thread Nano移植到STM32F103开发板后&#xff0c;第一个令人兴奋的里程碑就是让系统真正"活"起来——而FinSH组件正是实现这一目标的完美起点。这个内置的命令行交互工具…...

突破联想笔记本BIOS限制:LEGION BIOS高级设置工具全解析

突破联想笔记本BIOS限制&#xff1a;LEGION BIOS高级设置工具全解析 【免费下载链接】LEGION_Y7000Series_Insyde_Advanced_Settings_Tools 支持一键修改 Insyde BIOS 隐藏选项的小工具&#xff0c;例如关闭CFG LOCK、修改DVMT等等 项目地址: https://gitcode.com/gh_mirrors…...

别再手动同步了!利用STM32定时器主从模式与ITR触发,实现硬件级精准定时联动

嵌入式系统中的定时器协同&#xff1a;STM32主从模式与ITR触发的硬件级联动 在工业控制、电机驱动和精密测量等场景中&#xff0c;多个定时器的精确协同往往是系统可靠性的关键。想象一下&#xff0c;当你的电机控制PWM需要与电流采样ADC严格同步&#xff0c;或者多个通信接口必…...

雀魂AI助手Akagi:5分钟搭建你的专属麻将教练

雀魂AI助手Akagi&#xff1a;5分钟搭建你的专属麻将教练 【免费下载链接】Akagi A helper client for Majsoul 项目地址: https://gitcode.com/gh_mirrors/ak/Akagi 你是否曾在雀魂游戏中面对复杂牌局不知所措&#xff1f;是否想提升麻将技巧却苦于没有专业指导&#xf…...

OpenClaw技能开发指南:为ollama-QwQ-32B编写自定义模块

OpenClaw技能开发指南&#xff1a;为ollama-QwQ-32B编写自定义模块 1. 为什么需要自定义技能开发 上周我需要每天手动查询三个城市的天气数据来生成日报&#xff0c;这种重复劳动让我开始思考&#xff1a;能否让OpenClaw帮我自动完成&#xff1f;当我发现现有的天气技能包都不…...

Node RED实战:5分钟搞定MQTT消息发布与订阅(附EMQX配置)

Node RED与MQTT实战&#xff1a;从零构建物联网消息系统 1. 为什么选择Node RED与MQTT组合&#xff1f; 物联网开发领域一直存在一个核心挑战&#xff1a;如何快速搭建可靠的消息通信系统而不陷入底层协议实现的泥潭。这正是Node RED与MQTT这对黄金组合的价值所在——它们让开发…...

Pixel Fashion Atelier实操手册:批量生成时利用CSV导入多组Enchantment参数

Pixel Fashion Atelier实操手册&#xff1a;批量生成时利用CSV导入多组Enchantment参数 1. 引言&#xff1a;为什么需要批量生成功能 在时尚设计领域&#xff0c;设计师经常需要快速生成多个不同风格的服装设计方案。传统方式需要逐个输入参数、等待生成、再调整参数&#xf…...