怎么在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.安装:2.样式的导入(2种方法)2.1 main.ts全局导入(平常自己的项目用的这个全局)2.2 按需引入组件样式 (简单介绍一下)1.安装插件2.配置插件 3.组件按需使用:App.vue 总结 …...
springboot中有哪些方式可以解决跨域问题
文章目录 什么是跨域解决方案CrossOrigin注解实现WebMvcConfigurer接口CorsFilter过滤器如何选择? 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 Talk is cheap ࿰…...
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华为云征文|华为云Flexus X实例性能实测:速度与稳定性的完美结合 前言一、Flexus云服务器X实例介绍1.1 Flexus云服务器X实例简介1.2 Flexus云服务器X实例特点1.3 Flexus云服务器X实例使用场景 二、实践环境介绍2.1 本次实践环境规划2.2 本次实践介绍 …...
【PyTorch】图像分割
图像分割是什么 Image Segmentation 将图像每一个像素分类 图像分割分类 超像素分割:少量超像素代替大量像素,常用于图像预处理语义分割:逐像素分类,无法区分个体实例分割:对个体目标进行分割全景分割:…...
如何快速建立自己的异地互联的远程视频监控系统,通过web浏览器可以直接查看公网上的监控视频(上)
目录 一、需求 二、方案 2.1、计划方案 2.2、实施准备 2.2.1所需配置的产品和服务 2.2.1.1云主机 (1)选择云平台 (2)配置云服务器 2.2.2.2视频监控平台软件 (1)视频监控平台软件 (2&am…...
实验2思科网院项目2.7.2-packet-tracer---configure-single-area-ospfv2---实践练习
实践练习 2.7.2-packet-tracer---configure-single-area-ospfv2---实践练习physical-mode 实验拓扑 相关设备配置 实验目标: 第 1 部分:构建网络并配置设备的基本设置 第 2 部分:配置和验证单区域 OSPFv2 的基本部署 第 3 部分:优化和验…...
Nginx实战经验分享:从小白到专家的成长历程!
目录 一、Nginx概述1、Nginx简介(1)事件驱动模型(2)异步处理(3)模块化设计(4)高性能(5)反向代理(6)负载均衡(7)…...
从画质设置看游戏引擎(其一)
前往我的博客,获取无广告,更好的阅读体验 1. 抗锯齿(Anti-Aliasing) 1.1 锯齿问题的起因 在三维模型的世界中,模型是连续的,但是屏幕像素是不连续,是离散的; 即当一个圆形显示在显…...
#git 问题failed to resolve head as a valid ref
问题如下: 解决方法: 1、运行 git fsck --full 可以查看具体error信息,一般都是head索引问题 2、.git\refs\heads\xxx(当前分支)txt编辑器打开显示乱码,而不是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
针对图像的经典卷积网络结构进化史及可视化 针对图像的经典卷积网络结构进化史及可视化(续)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,添加配置,启用 hystrix feign.hystrix.enabledtrue application.yml 添加配置 feign:hystrix:enabled: true启用 hystrix 后,访…...
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(零样本学习)特点:工作原理:优点:缺点: 二、Few-shot Learning(少样本学习)特点:工作原理&#…...
做数据抓取工作要如何选择ip池
选择合适的IP池对于数据抓取工作至关重要。一个优质的IP池可以提高抓取的效率和成功率,同时减少被目标网站封禁的风险。以下是选择IP池时需要考虑的一些关键因素: 1. IP类型 住宅IP:住宅IP通常来自真实用户,难以被识别为代理。它…...
防止电脑电池老化,禁止usb或者ac接口调试时充电
控制android系统,开发者模式,开启和禁止充电 连接 Android 手机到电脑的 USB 端口。 下载并安装 Android Debug Bridge (ADB) 工具[1]。 USB: 在命令行中输入 adb shell dumpsys battery set usb 0,以禁止 USB 充电。 在命令…...
智权半导体/SmartDV力助高速发展的中国RISC-V CPU IP厂商走上高质量发展之道
作者:Karthik Gopal SmartDV Technologies亚洲区总经理 智权半导体科技(厦门)有限公司总经理 进入2024年,全球RISC-V社群在技术和应用两个方向上都在加快发展,中国国内的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会…...
云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风,以**「云启出海,智联未来|打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办,现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接:A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串,只有在同时为 o 时输出 Yes 并结束程序,否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1):从基础到实战的深度解析-CSDN博客,但实际面试中,企业更关注候选人对复杂场景的应对能力(如多设备并发扫描、低功耗与高发现率的平衡)和前沿技术的…...
华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要: 近期,在使用较新版本的OpenSSH客户端连接老旧SSH服务器时,会遇到 "no matching key exchange method found", "n…...
Java求职者面试指南:计算机基础与源码原理深度解析
Java求职者面试指南:计算机基础与源码原理深度解析 第一轮提问:基础概念问题 1. 请解释什么是进程和线程的区别? 面试官:进程是程序的一次执行过程,是系统进行资源分配和调度的基本单位;而线程是进程中的…...
uniapp手机号一键登录保姆级教程(包含前端和后端)
目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号(第三种)后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...
【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制
使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下,限制某个 IP 的访问频率是非常重要的,可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案,使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...
Qt 事件处理中 return 的深入解析
Qt 事件处理中 return 的深入解析 在 Qt 事件处理中,return 语句的使用是另一个关键概念,它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别:不同层级的事件处理 方…...
Elastic 获得 AWS 教育 ISV 合作伙伴资质,进一步增强教育解决方案产品组合
作者:来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布,Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明,Elastic 作为 …...
