怎么在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提供的按钮、对话框、列表等组件来构建你的用户界面。

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

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

相关文章

5QI(5G QoS Identifier)

5QI&#xff08;5G QoS Identifier&#xff0c;5G 服务质量标识符&#xff09;是在5G网络中用于定义特定数据流所需服务级别的指标。它用于优先处理流量&#xff0c;并根据流量的类型及其特定需求分配网络资源。5QI值从1到255&#xff0c;每个值对应一组QoS参数&#xff0c;这些…

数据结构和算法基础(一)

文章目录 链表反转链表合并删除链表倒数第 n 个结点找链表的中间结点链表中环的检测排序算法递归 趁空闲时间刷一遍极客时间上王争的《数据结构与算法之美》课程&#xff0c;个人觉得写的很好&#xff0c;每章节由浅入深且从基础到引入设计类问题&#xff0c;如果写过很多代码想…

成都睿明智科技有限公司抖音电商服务靠谱吗?

在这个电商风起云涌的时代&#xff0c;抖音作为短视频直播的超级流量池&#xff0c;正深刻改变着人们的购物习惯。无数商家蜂拥而至&#xff0c;渴望在这片蓝海中找到属于自己的岛屿。而提及抖音电商服务&#xff0c;成都睿明智科技有限公司无疑是一个备受瞩目的名字。那么&…

WebSocket 在 Spring Boot 中的高级应用指南

WebSocket 在 Spring Boot 中的高级应用指南 深入理解WebSocket协议 深入理解STOMP协议 1. 概述 WebSocket 是一种基于 TCP 的全双工通信协议&#xff0c;允许服务器和客户端之间进行持续的双向通信。与传统的 HTTP 请求-响应模型不同&#xff0c;WebSocket 是一个持久的连接…

Linux 进程的基本概念及描述

目录 0.前言 1. 什么是进程 1.1 进程的定义与特性 1.2 进程与线程的区别 2.描述进程 2.1 PCB (进程控制块) 2.2 task_struct 3.查看进程 3.1 查看进程信息 3.1.1 /proc 文件系统 3.1.2 ps 命令 3.1.2 top 和 htop 命令 3.2 获取进程标识符 3.2.1使用命令获取PID 3.2.2 使用C语言…

微信小程序数据操作指南:从绑定到更新

微信小程序数据操作指南&#xff1a;从绑定到更新 在微信小程序开发中&#xff0c;数据操作是核心环节之一。微信小程序提供了一系列简洁而强大的数据操作方法&#xff0c;帮助开发者轻松实现数据的绑定、更新和渲染。本文将详细介绍微信小程序中常用的数据操作方法&#xff0…

加密与安全_HTOP 一次性密码生成算法

文章目录 HOTP 的基础原理HOTP 的工作流程HOTP 的应用场景HOTP 的安全性安全性增强措施Code生成HOTP可配置项校验HOTP可拓展功能计数器&#xff08;counter&#xff09;计数器在客户端和服务端的作用计数器的同步机制客户端和服务端中的计数器表现服务端如何处理计数器不同步计…

AIGC学习笔记—minimind详解+训练+推理

前言 这个开源项目是带我的一个导师&#xff0c;推荐我看的&#xff0c;记录一下整个过程&#xff0c;总结一下收获。这个项目的slogan是“大道至简”&#xff0c;确实很简。作者说是这个项目为了帮助初学者快速入门大语言模型&#xff08;LLM&#xff09;&#xff0c;通过从零…

vue3学习记录-computed

vue3学习记录-computed 1.为什么要用computed2.使用方法2.1 基本实例2.2 可写计算属性 1.为什么要用computed 写个购物车的案例 <script setup> import { ref, reactive,computed } from "vue" const tableData reactive([{ name: 商品1, price: 10, num: 1…

3. 轴指令(omron 机器自动化控制器)——>MC_MoveRelative

机器自动化控制器——第三章 轴指令 5 MC_MoveRelative变量▶输入变量▶输出变量▶输入输出变量 功能说明▶指令详情▶时序图▶重启运动指令▶多重启动运动指令▶异常 MC_MoveRelative 指定自指令当前位置起的移动距离&#xff0c;进行定位。 指令名称FB/FUN图形表现ST表现MC…

初始C语言(五)

前言 本文章就代表C语言介绍以及了解正式完成&#xff0c;后续进行具体分析和详细解析学习。知识根深蒂固才可以应付后来的学习&#xff0c;地基要打好&#xff0c;后续才会轻松。 十四、结构体 结构体是C语言中最最重要的知识点&#xff0c;使得C语言有能力描述复杂的类型。 …

使用fastapi搭建ChatGPT对话后台

使用fastapi搭建ChatGPT对话后台 参考资料&#xff1a;使用fastapi搭建ChatGPT对话后台 效果&#xff1a;在本地构建网页达成类似chatgpt的对话效果&#xff0c;一个字一个字的返回生成结果 ChatGPT初步调用 import os import fastapi import dotenv from httpx import AsyncC…

JVM(HotSpot):字符串常量池(StringTable)

文章目录 一、内存结构图二、案例讲解三、总结 一、内存结构图 JDK1.6 JDK1.8 我们发现&#xff0c;StringTable移入了Heap里面。所以&#xff0c;应该想到&#xff0c;StringTable将受到GC管理。 其实&#xff0c;1.6中&#xff0c;在方法区中的时候&#xff0c;也是受GC管…

从底层理解为什么常量区中的代码不能被修改?

目录 前言&#xff1a;一、了解虚拟地址二、页表映射三、常量区不能被修改的原理四、常量区不可修改的意义 前言&#xff1a; 平时我们在编写代码时都会用到或遇到所谓的常量区或者不可修改的代码&#xff0c;比如说用双引号包起来字符串&#xff08;“Hello World”&#xff…

微服务SpringSession解析部署使用全流程

目录 1、SpringSession简介 2、实现session共享的三种方式 1、修改Tomcat配置文件 2、Nginx负载均衡策略 3、redis统一存储 0、准备工作 1、本地服务添加依赖 2、修改本地服务配置文件 3、添加application.properties文件 4、添加nacos - redis配置 5、修改本地项目…

Egress Gateway 是一个重要的组件,用于管理从服务网格内部到外部服务的流量

在 Istio 服务网格中&#xff0c;Egress Gateway 是一个重要的组件&#xff0c;用于管理从服务网格内部到外部服务的流量。Egress Gateway 充当了一个边界路由器的角色&#xff0c;处理所有从网格内部发出的请求到非网格服务的流量。它可以帮助解决服务网格内外部服务通信的问题…

Linux启动mysql报错

甲方公司意外停电&#xff0c;所有服务器重启后&#xff0c;发现部署在Linux上的mysql数据库启动失败.再加上老员工离职&#xff0c;新接手项目&#xff0c;对Linux系统了解不多&#xff0c;解决起来用时较多&#xff0c;特此记录。 1.启动及报错 1.1 启动语句1 启动语句1&a…

【Rockchip系列】官方函数:drm_buf_alloc

drm_buf_alloc 函数 功能 分配一个DRM&#xff08;Direct Rendering Manager&#xff09;缓冲区。 语法 void* drm_buf_alloc(int width, int height, int bpp, int* fd, int* handle, size_t* size, int flags);参数 width: 缓冲区宽度&#xff08;像素&#xff09;heigh…

全站最详细的Python环境配置步骤

1、官网下载IDE JetBrains下载 2、IDE下载、安装步骤 这里展示的是如何在Windows上下载、安装Pycharm工具&#xff0c;Linux的步骤类似。 2.1、选择开发者工具 选择开发者工具 2.2、选择Pycharm 选择Pycharm 2.3、选择下载 选择下载 2.4、选择社区版 一般而言&#xff…

基于SpringBoot+Vue的留守儿童爱心网站系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…