如何在微信小程序里面使用vant

已于 2022-03-24 10:47:19 修改
阅读量900 收藏
点赞数
文章标签： vue.js
于 2022-03-24 09:30:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuyuan123456/article/details/123702609
版权
本文档介绍了如何在微信小程序中使用Vant2.0，并通过npm进行模块构建和引入。首先执行`npm init -y`初始化项目，然后查阅Vant2.0官方文档，确保在微信开发者工具中勾选「使用npm模块」。接着进行npm构建，最后将 vant 模块引入并正常使用。务必记得在使用微信开发者工具时保持「使用npm模块」选项被选中。
摘要由CSDN通过智能技术生成

第一步  npm  init -y

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

 第二步在vant2.0小程序官方文档中查看

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

 第三步，勾选“使用npm模块”

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

第四步，构建npm

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

第五步，引入

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

 第六步，使用即可

 

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

注意！使用微信开发者工具时，一定要把这个勾选上

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

 

 

 

 

JSONP＄
关注
在微信小程序中使用vant的方法
10-16
至此，你已经成功地在微信小程序中引入并使用了 Vant 组件。通过这种方式，你可以方便地利用 Vant 提供的各种组件，提高开发效率并提升小程序的用户体验。在实际开发过程中，还可以结合 Vant 的文档学习更多组件的...
微信小程序常见组件布局样式——单选框的使用和禁用
weixin_42694422的博客
10-14 1289
微信小程序常见组件布局样式——单选框的使用和禁用
微信小程序slot插槽的使用
一步一个脚印，踏实努力，向着目标前进
07-27 4271
在微信小程序中，可以使用slot插槽来实现组件的内容分发。通过slot插槽，我们可以在组件中定义一个或多个插槽，然后在使用组件的地方插入相应的内容。这样可以让组件在不同的上下文中展示不同的内容。
微信小程序-使用vant组件库
最新发布
xiangxiongfly
09-25 1546
Vant Weapp 是有赞前端团队开源的小程序 UI 组件库，基于微信小程序的自定义组件开发，可用来快速搭建小程序项目。
vant_radio组件实现勾选+取消勾选
qq_43260366的博客
11-17 4142
【代码】vant_radio组件实现勾选+取消勾选。
Vant Weapp
weixin_48702807的博客
02-28 540
van-radio name 是一个字符串，无法传对象的处理。以及 mpx 多层嵌套 for 循环处理。
小程序radiogroup循环
fhrlhh的博客
05-07 2081
<view class="group" v-for="(item,index) in listaaa" :key="index"> <view class="title"><text class="uni-form-item__title">{{item.name}}</text></view> <view v-for="(time,tindex) in item.timelist" :key="tindex"> .
微信小程序使用 vant Dialog组件的正确方式
10-15
Vant包含了近50个经过实际业务检验的组件，例如 Dialog 组件，它在微信小程序中的使用方法是本文的重点。 首先，Vant 的 Dialog 组件是一个弹窗对话框，它可以用于显示警告、确认或输入等操作。在微信小程序中使用 ...
微信小程序npm引入vant-weapp的踩坑记录
10-16
本文详细记录了在微信小程序项目中引入vant-weapp（一种基于Vue的轻量、可靠的移动端UI框架）时所遇到的一些问题及其解决方法。以下将根据文章内容，详细阐述微信小程序中使用npm引入依赖的流程、遇到的问题以及解决...
微信小程序引入Vant组件库过程解析
11-30
Vant Weapp 基于 Vant UI，是一个在移动端广泛使用的前端框架 vant 的微信小程序版本。 **引入 Vant Weapp 组件库的过程分为以下几个步骤：** 1. **前期准备：** 首先，你需要确保已经安装并配置好了微信开发者...
微信小程序搭配vantweapp使用表单中Field输入框替换原始input输入框，reset重置按钮失效或失败
qq_44776950的博客
08-01 4057
微信小程序文档中form表单原来有重置事件 button按钮的reset只对表单中的input有效，于是点击重置按钮重置失败，所以将表单绑定bindreset事件来重置表单 解决方案： wxml代码： <form bindsubmit="addbtnSub" bindreset="delbtnre"> <!-- <input name="barcode" placeholder="请输入条形码" value="6913825649859"></input>
element 使用radio 双层for循环渲染数据
lujingjing567的博客
11-05 3061
事情是这样的，小编的同事写出来一个bug，关于element radio组件双侧for循环的bug 原本要实现的是如下图的数据，首先数据第一层是优先级，第二层是radio，数据中所有的radio是一组，单选。 首先同事问我这个问题时，我首先想到的是element el-radio-group，但是问题来了，用双层v-for渲染的数据显示的结果如下 html： &lt;e...
【微信小程序---radio单选框讲解】
m0_56349322的博客
02-22 1万+
radio 单选框 1 radio 标签 必须要和 父元素 radio-group 来使用 2 value 选中的单选框的值 3 需要给 radio-group 绑定 change 事件 bindchange=“handleChange” 4 需要在页面中显示选中的值 radio单选框.wxml <radio-group bindchange="handleChange"> <radio value="male">男</radio> <radio
微信小程序中使用vant组件库（超详细）
热门推荐
阿浩的博客
01-17 2万+
Vant是一个轻量、可靠的移动端组件库，于2017年开源。目前Vant官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。微信小程序版本的Vant组件库是Vant Weapp，其官方文档是我们废话不多说，直接进入主题，在微信小程序中使用Vant Weapp。
如何在小程序中引入使用vant框架
huangzhixin1996的博客
07-01 1万+
在微信小程序的原生组件较少的背景下，通常我们在开发微信小程序的时候则往往会使用该框架作为主体的UI框架进行开发，省时省力，大大缩短了开发的周期。由于小程序的环境和普通的Vue项目大不相同，所以想要在小程序中引入vant框架并不能直接用npm去直接构建，它稍微会更麻烦些，所以接下来的内容会详细介绍一下如何在微信小程序中引入使用Vant。关于这个文件的修改，主要是看我们用的小程序模板，不同模板生成的文件目录不一样，新版的一些模板目录可能会导致小程序找不到我们的npm包位置，所以需要对这个文件做一些调整。
小程序开发使用vant库，步骤分步详解，初次使用简单易懂
weixin_43968782的博客
10-09 4552
微信小程序开发使用vant框架，内容分步讲解，简单易懂，刚开始使用小程序开发，简单易懂
在微信小程序中怎么使用vant框架？
m0_69892739的博客
04-22 3427
Vant 是一个轻量、可定制的移动端组件库，于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。Vant框架是一个用来做移动端开发的框架。详情请点击vant官网。
【微信小程序——01】微信小程序引入vant保姆级教程，创建微信小程序教程全程保姆级讲解，微信小程序创建vant项目，小程序vant全局引入
qq_51055690的博客
06-09 7365
小程序引入vant，如何引入vant，快速引入vant，引入vant教程，小程序引入vant
在微信小程序中安装和使用vant框架
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
06-11 1981
详细介绍了如何在微信小程序中安装并使用vant组件
微信小程序快速集成vant-weapp教程
微信小程序引入 vant-weapp 是为了在小程序开发中使用 vant 这个流行的移动端 UI 库，它提供了丰富的组件和样式，帮助开发者快速构建美观的用户界面。 vant-weapp 是 vant UI 专门为微信小程序定制的版本。 1. **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值