uniapp(微信小程序)使用vant全过程

最新推荐文章于 2025-06-10 20:18:30 发布
原创 最新推荐文章于 2025-06-10 20:18:30 发布 · 797 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #微信小程序 #前端

本文档介绍了如何快速安装和使用Vant Weapp，这是一个轻量级、可靠的小程序UI组件库。首先，你可以通过npm或yarn进行安装，并将dist文件放入项目中的wxcomponents文件夹。接着，全局或局部引入 vant 组件，然后在小程序中使用。这个库为开发者提供了方便快捷的小程序界面开发解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vant2官网：Vant Weapp 轻量、可靠的小程序 UI 组件库

github: Releases · youzan/vant-weapp · GitHub轻量、可靠的小程序 UI 组件库. Contribute to youzan/vant-weapp development by creating an account on GitHub.https://github.com/vant-ui/vant-weapp/releases

1.安装

# 通过 npm 安装 npm i @vant/weapp -S --production

# 通过 yarn 安装 yarn add @vant/weapp --production

# 安装 0.x 版本 npm i vant-weapp -S --production

 2.拿到dist文件

安装完成出现node_modules文件夹，如下图：

3.根目录下创建wxcomponents文件夹

创建文件夹，将dist文件放入(我这里改名为vant)

 

4.引入vant

 按需引入组件全局挂载/局部挂载 

 

5.使用

 

基于Vant UI的微信小程序开发（随时更新的写手）
weixin_48053866的博客
05-10 3098
（一）悬浮浮动（二）底部跳转（三）上传组件：实现图片/文件上传预览、删除、点击之后列表查看1、js代码（1）替换了借助的是微信小程序开发工具的缓存路径的代码部分2、页面代码（四）图片预览1、使用vant组件：van-image（1）js代码（2）html代码2、使用image。
uniapp或微信小程序一些问题解决
lxt135744的博客
05-24 622
参考博主：微信小程序按钮去不掉边框_微信小程序button去掉边框-优快云博客文章浏览阅读1k次。最近在学uni-app，顺便自己写个小程序。左上角放了个button，可边框怎么也去不掉…原来微信小程序的按钮要去掉边框要这么写。。。_微信小程序button去掉边框。
uniapp引入vantweapp踩坑笔记
A Lucky Boy的博客
01-11 4223
文件中的样式出现了问题，然后就根据提示的路径找到了这个文件，打开后发现都是一些打包过后的样式，刚进去时候一脸蒙，不知道这些样式出现了什么问题，也不敢轻易的修改文件，这时候又到了面向百度的时候了，通过在百度的帮助下，我发现原来是打包过后导致了字体文件路径出错，一共有两种方式可以解决，当我满怀信心的开始创建项目，但刚开始创建项目就遇到了问题，出师不利,问题如下，输入命令时报错（后边发现这个报错不是每次都会出现，因为下载源问题，）本着遇到报错不用慌，打开百度问度娘的原则，最后还是在百度找到了方法，原来是。
微信小程序 vant2 中的radio单选组件不展示及报错问题
最新发布
liuyuting___的博客
06-10 308
插槽语法，需要使用小程序自己的插槽语法。如果只是单独使用一个单选框，不需要考虑上下其他表单的格式统一和对齐的话，可以这样写。报错提示<template #input>这段代码报错，尝试把插槽代码去掉后，不会报错，但是页面中不会展示单选选项框。最近在做微信小程序开发，使用的vant2组件，其中一个页面涉及到表单中的单选框，一开始是按照vant2官方文档（但是我做的是一个新增表单页面，需要考虑单选框和其他表单之间的统一格式和上下对齐。后来去查了一下，是因为微信小程序的 WXML 模板语法不支持 Vue 的。
uniapp微信小程序使用vant组件库
weixin_45393413的博客
10-24 1431
uniapp微信小程序使用vant-weapp组件
uniapp开发微信小程序笔记8-uniapp使用vant框架
wzy_PROTEIN的博客
11-26 2933
​ 前言：其实用uni-app开发微信小程序的首选不应该是vant，因为vant没有专门给uni-app设置专栏，可以看到目前Vant 官方提供了Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护React 版本和支付宝小程序版本。 所以我们一般使用的就是微信小程序版本，所以在开发上会有一点不一样。一、下载vant依赖包二、项目中引入vant三、使用vant组件四、使用组件五、 举例使用Rate评分组件，对比官网代码和uni-app代码 ​
uniapp微信小程序引入vant组件库
章小鱼的博客
06-01 6010
使用uniapp写微信小程序时，使用vant组件库
uniapp微信小程序使用vant-weapp详细操作步骤（各种坑）
南北极之间
10-20 5228
首先在微信小程序里用的vant是vant-weapp而不是vant官网：Vant Weapp - 轻量、可靠的小程序 UI 组件库轻量、可靠的小程序 UI 组件库。
基于Vite、uniapp和vantweapp的微信游戏商城小程序源码.zip
06-06
综上所述，这个压缩包包含了一个使用Vite、uniapp和vantweapp构建的微信游戏商城小程序的完整源代码，开发者可以通过研究这个项目来学习如何利用这些技术进行微信小程序的开发，了解现代前端工具的使用方法，以及...
VantWeapp是有赞移动端UI组件库Vant的小程序版本
08-10
2. **API接口兼容**：为了方便开发者，Vant Weapp与Vant的API接口保持高度一致，这意味着如果你已经熟悉Vant，那么在微信小程序上使用Vant Weapp将没有任何学习曲线。 3. **丰富的组件集合**：Vant Weapp包含了各种...
uniapp编写微信小程序引入element
03-15
### 在 UniApp 微信小程序项目中正确引入 Element 组件库 Element 是一套基于 Vue 的桌面端组件库，主要用于 Web 应用程序开发。然而，在微信小程序环境中直接使用 Element 存在一定的局限性和挑战[^1]。 #### ...
仿【得物】微信小程序实战全教程（动手就会）
爱前端也爱恋爱
09-01 2394
前言 最近正在学习微信小程序开发，也是与两个同学一起合作着手仿做得物APP微信小程序。这里主要分享一下我的学习过程及踩过的一些坑，希望对您有所帮助。 “我自己是一名从事了6年web前端开发的老程序员，今年年初我花了一个月整理了一份最适合2021年自学的web前端全套培训教程（视频+源码+笔记+项目实战），从最基础的HTML+CSS+JS到移动端HTML5以及各种框架和新技术都有整理，打包给每一位前端小伙伴，这里是前端学习者聚集地，欢迎初学和进阶中的小伙伴（所有前端教程关注我的微信公众号：web前端..
[保姆级教程]在uniapp中使用vant框架
热门推荐
肥晨开发的学习之路
06-21 1万+
和Vue.js的版本都在不断更新，因此上述步骤可能会随着版本的更新而有所变化。但是，如果你想要全局引入某个组件（这通常不推荐，因为它会增加你的包大小），你可以在。可能已经内置了类似的工具，或者你可能需要根据你的构建工具进行特定的配置。来按需加载组件，那么你可以不用全局引入样式，而是在每个组件中单独引入。然后，在你的模板部分，你可以像使用普通的Vue组件一样使用。的组件时，Babel会自动为你处理样式和组件的按需引入。根据参考文章和Vant的官方文档，在你的Vue 2.x项目的根目录下，使用npm来安装。
uniapp是否可以用vant等移动端UI库、使用步骤以及需要注意的问题
商务合作 / 项目定制开发 / 前端一对一培训、答疑
12-04 9291
解决方法，修改 ~node_modules\vant\lib\index.css 文件，将该文件中的 “url” 改为 “ url” ，一共需修改2处。其他问题，请参考：https://github.com/youzan/vant/issues?原因是微信小程序不支持document，window对象，所以navigator自然是无法使用的。参考文章：https://github.com/youzan/vant/issues/12421。1、安装Vant Version 2.13.2后，导入样式，报错。
UniApp小程序使用vant引入vant weapp
weixin_53221528的博客
12-29 1709
UniApp小程序vant weapp
在Uniapp微信小程序中使用vantweapp@莫成尘
莫成尘的博客
10-26 1303
有时候我们发现，在uniapp中使用vantweapp的时候，vant官方的案例并不能帮助我们在uniapp中使用vant。 如您满意请给莫成尘点个star（以下链接点击下载即可） 项目链接: https://gitee.com/Filialpiety/uniapp-and-vantweapp. 您将看到以下页面，下载压缩包本地解压即可使用。具体使用方式和vant一样。 vantweapp官网链接: https://youzan.github.io/vant-weapp/#/button. 附加和可能出现
uniapp导入使用vant-weapp组件
cuilinlong的博客
05-13 3837
将npm或刚下载的文件vant-weapp中的dist文件夹复制到wxcomponents文件夹中，并将dist文件夹重命名为vant。安装完毕后会出现node_modules目录，及vant的weapp文件夹。右键单击项目目录，使用命令行窗口打开所在目录，在终端输入命令，安装vant。方法二：通过GitHub下载vant-weapp，完成后解压。方法一：如果电脑已经安装了node，可以通过npm安装。在项目根目录下创建wxcomponents文件夹。在相应页面中使用vant组件。
关于在uniapp写微信小程序使用vant方法
m0_69896158的博客
03-12 1283
关于在uniapp写小程序使用vant方法(真实有效)
uniapp使用vant-weapp（微信小程序）
weixin_68882321的博客
04-27 1018
3. 在项目跟目录创建 wxcomponents 文件夹目录，把复制的 dist 文件夹直接放里面就行。4.在 uniapp 官网里 查找框架里的 easycom 组件模式。2. 解压下载的文件包，在复制 dist 文件夹里的文件。（可以改dist的文件名，叫vant）1. 打开GitHub下载文件包。5.从官网里复制，修改路径。
uniapp 微信小程序 使用 vantui 里面的图标
02-26
### 如何在 UniApp 微信小程序中使用 Vant UI 图标 #### 安装 Vant Weapp 组件库 为了能够在 UniApp 开发的微信小程序项目中使用 Vant UI 的图标，首先需要安装 `vant-weapp`。可以通过 npm 或者 yarn 来完成这一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值