当前位置: 首页 > 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会…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

GraphQL 实战篇:Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...