在微信小程序项目中安装和使用 Vant 组件库

vant Wwapp 小程序开发组件库官网 Vant Weapp - 轻量、可靠的小程序 UI 组件库

安装 Vant 组件库

1.在微信小程序项目文件目录的空白位置右键,选择在外部终端窗口中打开

2在命令行输入如下命令(在项目中创建包管理配置文件 package.json)

npm init -y 

3.输入如下命令安装 Vant 组件库

weapp@后面的是组件库的版本号

npm i @vant/weapp@1.11.5 -S --production

4.构建 npm 包

打开微信开发者工具,点击 工具 -> 构建 npm

5.修改 app.json

        将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

使用 Vant 组件库

引入

在 app.json 或页面的 .json 文件中引入组件

如:

"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

使用

通过定义的组件名称来使用组件

<text>首页</text>
<view></view>
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>

        关于各种组件的引用和使用,在官网都做了详细的讲解

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

AI预测体彩排3采取878定位大底=23策略+杀断组+杀组选+杀和尾+杀和值012缩水测试5月15日预测第1弹

昨天与一位玩排3的彩友通过视频直播的形式聊了下&#xff0c;受益匪浅&#xff0c;给我提供了一些比较有价值的建议&#xff0c;比如&#xff0c;对于878的定位策略&#xff0c;方向是没问题的&#xff0c;但是8783的话&#xff0c;还是缺乏一定的命中率&#xff0c;如果87823&…

【算法学习】拓扑排序

文章目录 拓扑排序课程表 拓扑排序 算法原理&#xff1a; 1.先找出图中入度为0的点&#xff0c;将该点加入到队列中 2.队列不为空时&#xff0c;拿出队头元素加入到最终结果 3.再遍历该点的邻接阵&#xff0c;将连接该点的点的入度全部减减 4.判断减减的点是否为入度为0&#…

亚马逊跨境电商平台优势凸显,武汉星起航解析助力卖家把握商机

在全球电商市场的激烈竞争中&#xff0c;亚马逊凭借其独特的优势和卓越的运营能力&#xff0c;成为众多卖家首选的跨境电商平台。武汉星起航作为深耕亚马逊跨境电商领域的领军企业&#xff0c;对亚马逊平台的优势有着深刻的理解和独到的见解。本文将重点探讨亚马逊跨境电商平台…

降Compose十八掌之『亢龙有悔』

公众号「稀有猿诉」 原文链接 降Compose十八掌之『亢龙有悔』 Jetpack Compose是新一代的声明式的UI开发框架&#xff0c;由Google在2019年推出&#xff0c;最初是作为Android的新式UI开发框架&#xff0c;但它本质是一个声明式UI开发框架&#xff0c;并不受制于底层的平…

腾讯云环境安装单机版minio

Minio 下载安装 wget https://dl.min.io/server/minio/release/linux-amd64/minio修改minio 文件为可执行文件 chmod x minio3、启动&#xff0c;随机端口启动 ./minio server /data/miniodata # 或者指定密码执行 MINIO_ACCESS_KEYmyminioadmin MINIO_SECRET_KEYmyminioadm…

精酿啤酒:品质的保障与消费者的信赖

在啤酒市场中&#xff0c;Fendi club啤酒以其卓着的品质和消费者的信赖赢得了广泛的认可。作为精酿啤酒的品牌&#xff0c;Fendi club啤酒始终坚持对品质的严格把控&#xff0c;为消费者带来放心的口感体验。 品质的保障源于Fendi club啤酒对原料的严谨挑选和加工。他们深知&a…

在大型项目上,Python 是个烂语言吗?

在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「Python的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01; python项目超过5万行&#x…

STM32的FLASH学习笔记

不同型号的 STM32&#xff0c;其 FLASH 容量也有所不同&#xff0c;最小的只有 16K 字节&#xff0c;最大的则达到了1024K 字节。大容量产品的闪存模块组织如图所示&#xff1a; STM32 的闪存模块由&#xff1a;主存储器、信息块和闪存存储器接口寄存器等 3 部分组成。 ​ ①主…

pikachu靶场通关之暴力破解token防爆破

这里写pikachu靶场token防爆破的第二种解法 用python脚本跑&#xff0c;下面是代码 import requests from bs4 import BeautifulSoup# url填自己的url url http://localhost:8086/pikachu-master/vul/burteforce/bf_token.php # 取出账号字典里的值&#xff0c;1.txt就是账号…

docker安装minio附带图片

1.拉镜像 docker pull minio/minio 2.创建挂载点目录 mkdir -p /usr/local/minio/config mkdir -p /usr/local/minio/data 3.创建minio容器 docker run \ -p 19000:9000 \ -p 9090:9090 \ --nethost \ --name minio \ -d --restartalways \ -e "MINIO_ACCESS_KEYmini…

k8s 二进制安装 优化架构之 部署负载均衡,加入master02

目录 一 实验环境 二 部署 CoreDNS 1&#xff0c;所有node加载coredns.tar 镜像 2&#xff0c;在 master01 节点部署 CoreDNS 3&#xff0c; DNS 解析测试 4&#xff0c; 报错分析 5&#xff0c;重新 DNS 解析测试 三 master02 节点部署 1&#xff0…

[HNCTF 2024] crypto/pwn

周日的比赛&#xff0c;赛后拿别人的WP又作了俩&#xff0c;最后一个题也是没弄懂&#xff0c;先记一下吧。 Crypto EZmath 一个简单的函数题。在sagemath里有个two_squares函数&#xff0c;可以从平方和恢复两个规模相近的数。这种比较适合于RSA里的p,q。另外未知的e用来猜…

mybatis:Spring junit 测试报错:Failed to load ApplicationContext

Spring junit 测试报错&#xff1a;Failed to load ApplicationContext 解决方法&#xff0c;修改mybatis版本&#xff0c;版本过高导致无法加载依赖

GDPU 竞赛技能实践 天码行空 期末小测

1. 除法&#xff08;原题&#xff09; &#x1f468;‍&#x1f3eb; 实验二&#xff1a;1.简单枚举 输入正整数n&#xff0c;按从小到大的顺序输出所有形如abcde/fghij n的表达式&#xff0c;其中a&#xff5e;j恰好为数字0&#xff5e;9的一个排列&#xff08;可以有前导0&a…

DBeaver如何csv导入数据

简言之先要创建任务&#xff0c;任务还需要去执行&#xff0c;只有执行之后才是执行真的导入了 那个保存任务真的很误导人啊 1.首先点击你要被导入的表&#xff0c;右键选择导入数据然后选择直接点击下一步,这个地方需要修改格式&#xff0c;否则会乱码 如果你导入的没有标题…

【Redis】Redis面试和工作中十有八九会遇到的问题

1. 数据类型 常用的Redis数据类型有5种&#xff0c;分别是&#xff1a; String、List、Set、SortedSet、Hash 还有一些高级数据类型&#xff0c;比如Bitmap、HyperLogLog、GEO等&#xff0c;其底层都是基于上述5种基本数据类型。因此在Redis的源码中&#xff0c;其实只有5种数…

鸿蒙生态融合进行时!菊风启动适配HarmonyOS NEXT,赋能原生应用实时

​​今日话题 鸿蒙HarmonyOS NEXT 自华为公开宣布鸿蒙 HarmonyOS NEXT 系统以来&#xff0c;该系统受到了业内广泛关注&#xff0c;和以往鸿蒙系统不同的是该系统底座完全由华为自研&#xff0c;摒弃了 Linux 内核和安卓 AOSP 代码&#xff0c;仅兼容鸿蒙内核及鸿蒙系统的应用…

什么是最大路径?什么是极大路径?

最近学习中&#xff0c;在这两个概念上出现了混淆&#xff0c;导致了一些误解&#xff0c;在此厘清。 最大路径 在一个简单图G中&#xff0c;u、v之间的距离 d ( u , v ) min ⁡ { u 到 v 的最短路的长度 } d(u,v) \min \{ u到v的最短路的长度 \} d(u,v)min{u到v的最短路的…

DRF之视图集

【 一 】视图集 ​ 在 RESTful 架构中&#xff0c;对资源的常规操作无非就是查询、新增、修改、删除等这么几种。为此&#xff0c;django-rest-framework 分别提供了对应通用类视图函数。但是&#xff0c;如果对同一个资源的不同操作逻辑分散在各个视图函数中&#xff0c;从逻…

AI地名故事:鸦岗村

鸦岗村&#xff0c;位于广州市白云区石井镇&#xff0c;是一个历史悠久、文化底蕴深厚的村落。据《广州地名志》记载&#xff0c;南宋时期&#xff0c;南雄珠玑巷的凌氏家族迁移至此地&#xff0c;并在此建立村落。由于村子周边的山岗上常有乌鸦栖息&#xff0c;因此得名“鸦岗…