如何在小程序中使用vant组件库？

一、npm init 生成package.json 配置文件

二、安装包执行命令

npm i @vant/weapp -S --production

三、修改 app.json

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

将"lazyCodeLoading": "requiredComponents"删除

四、使用npm包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

五、使用组件

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。

所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录

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

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger" loading>危险按钮</van-button>
<van-button plain hairline type="info">细边框按钮</van-button>

2分钟学会小程序中使用vant组件库相关推荐

微信小程序中使用vant组件库（超详细）
目录前言 Vant Weapp的安装与使用 1.安装 node.js 2.通过 npm 安装 3.修改 app.json 4.修改 project.config.json 5.构建 npm 包 6. ...
微信小程序中引用vant组件库
步骤 1.vant组件库里面也有说明,它说package.json 和 node_modulles 必须在miniprogram目录下,可是一般你刚新建一个小程序项目的时候,是没有package.js ...
五分钟学会在微信小程序中使用 vantUI 组件库
前言我们在开发微信小程序时,设计和实现好用的用户界面无疑是至关重要的一步.但是微信小程序官方自带的 UI 组件库无法满足很多使用场景,这个时候就需要我们使用一些第三方的 UI 组件库.而 vant ...
【uniapp】小程序中修改Vant组件navbar左箭头的颜色及图标与背景
感觉自己封装的返回组件不太好用,于是尝试用一下Vant组件库里的 NavBar [uniapp]小程序自定义一个通用的返回按钮组件_小付学代码的博客-CSDN博客_uniapp自定义返回按钮左边箭头, ...
微信小程序中使用vant weapp 的dialog组件
微信小程序中使用vant weapp 的dialog组件官方文档路径:import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';,这不是 ...
关于微信小程序如何使用Vant组件
微信小程序如何使用Vant组件前言一.微信小程序自动查找第二种前言今天闲着没事,兴趣来了,想写写微信小程序,用原生的敲,因为懒得原因,不想再去封装一些组件库,就想当Vant,引用Vant真的 ...
手把手教你实现小程序中的自定义组件
之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 1.6.3 开始,官方对于 ...
html img 手势缩放,微信小程序中利用image组件实现图片手势缩放
微信小程序中利用image组件实现图片手势缩放,前端大神严灏的牛文,讲解了微信小程序中image组件的三种是缩放模式,三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片. 原 ...
微信小程序中使用阿里巴巴图标库
这里写自定义目录标题微信小程序中使用阿里巴巴图标库第一步第二步第三步微信小程序中使用阿里巴巴图标库第一步阿里巴巴图标正常加入自己的项目,并下载到本地: 注意:这里的选择 ![在这里插入图 ...
微信小程序中使用vant框架
一.Vant 是有赞前端团队开源的移动端组件库, Vant 是一个轻量.可靠的移动端组件库,于 2017 年开源.目前 Vant 官方提供了 Vue 2 版本.Vue 3 版本和微信小程序版本,并由社 ...

2分钟学会小程序中使用vant组件库

如何在小程序中使用vant组件库？

2分钟学会小程序中使用vant组件库相关推荐

最新文章

热门文章