uni-app中使用vant注意事项

最新推荐文章于 2025-03-03 14:59:13 发布
最新推荐文章于 2025-03-03 14:59:13 发布
阅读量6.7k 收藏 11
点赞数 5
分类专栏： uniapp 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/soooyoung/article/details/110876596
版权
本文介绍了在uni-app中使用Vant UI框架时遇到的问题及解决办法，包括 vant weapp 源码引入、组件冲突处理、CSS错误修正、v-model和事件绑定的适配、组件样式覆盖以及在APP中使用本地字体等问题，帮助开发者顺利地在uni-app项目中集成和使用Vant组件。

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

  1. 需要下载vant的weapp版源码，将dist目录复制到uniapp项目中，路径：项目/wxcomponents/vant
  2. 引入后hbuilderx会自动给每个组件生成一个vue文件，但是会包一层uni-shadow-root，如果同时使用uni官方的组件且是通过easycom的custom使用的，则会冲突，需要将正则改为^uni-((?!(shadow-root)).*)
  3. 如果报了vant的css错误（Unclosed bracket），则全局搜索https://img.yzcdn.cn/vant/vant-icon-d3825a.woff，把所有的url前加一个空格，不管是wxss还是vue里。
  4. vant的组件无法直接使用v-model，因为uni会自动给事件的值套一层，可以自己再封装一层处理。
  5. vant的组件(如：button)无法直接使用click事件，需要添加.native装饰器
  6. 在直接使用vant的组件时要注意，由于自动生成的vue组件包了一层，在组件上添加的class会没有效果，需要通过/deep/重写内部样式
  7. hbuilderx会给wxcomponents下的组件在每次运行的时候自动生成/重置index.vue，所以每次修改里面的组件时，原文件和index.vue都要修改
  8. 在APP中如果要使用本地字体文件，可以到vant的icon
最低0.47元/天 解锁文章
uniapp的h5端和小程序端同时引入vant-weapp和遇到的报错
weixin_44730534的博客
11-24 2221
uniapp的h5端和小程序端同时引入vant-weapp和遇到的报错 “usingComponents”: { “van-button”: “/wxcomponents/vant/button/index”, “van-cell”: “/wxcomponents/vant/cell/index”, “van-cell-group”: “/wxcomponents/vant/cell-group/index”, “van-icon”: “/wxcomponents/vant/icon/index”,
uni-app使用Vant组件
hahahhahahahha123456的博客
11-19 8305
前言 vant ui有h5版和微信小程序版。其h5版只能用于h5，其微信小程序版（vant weapp）可用于微信和App，从uni-app 2.4.7起，H5和QQ小程序也支持了微信小程序组件。 使用步骤 下载代码 在项目根目录下新建wxcomponents目录 ，此目录应该与components目录同级。 直接通过git下载vant-weapp最新源代码，并将dist目录拷贝到新建的wxcomponents目录下，并重命名dist为vant-weapp。 在...
uniapp是否可以用vant等移动端UI库、使用步骤以及需要注意的问题
商务合作 / 项目定制开发 / 前端一对一培训、答疑
12-04 8710
解决方法，修改 ~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分包处理,一次性教会你解决错误码：80051
最新发布
stc_ljc的博客
03-03 1371
我们无论在使用uniapp开发小程序和微信原生开发在真机调试或发布上线时经常会遇到这个提示，在使用 Uniapp 开发小程序，甚至是进行微信原生开发时，大家想必都遇到过这样的困扰：在真机调试或者发布上线的过程中，频繁收到关于小程序主包体积的提示。这一问题严重影响了小程序的性能和用户体验，亟待解决。
Uni-app使用vant和uview组件
市民景先生
02-23 2065
小程序能使用vant-weapp组件，且官网的安装是直接导入小程序中，不能直接导入uni-app框架中。easycom是一种引入规则，不需要导包就可以使用。1.3.创建uni-app项目。在pages.json引入对应。讲里面的组件引入自己新创建的。如果没有pages.json。文件中且必须是这个名字。在main.js中引入。再github上下载。
vant-image在uni-app下报错，Invalid handler for event “load“ Invalid handler for event “error“
Bitter的博客
10-17 2266
vant ui h5环境。vant-image会报错，源码中，vant-image里面有onLoad和onError方法。但是断点调试的时候,this.onLoad是undefined。可能被uni-app干掉了。 解决方法： vant在uniapp总是有各种小问题，尽量不要在uniapp中的环境下使用。 ...
uniapp安装vant并解决样式引入报错
qq_44741577的博客
03-16 2137
unaipp引入vant组件库的时候，按照官网的步骤，一直报错。
uniapp项目h5端使用vant组件
jdsfui的博客
01-19 8097
在做uniapp项目时由于vant组件小程序和h5组件是不通用的，所以vant组件在h5中要单独引用。 1.首先使用npm i @vant/weapp -S --production 安装vant的组件包，安装成功后结构目录如下 2.我们在全局中引用vant组件，找到main.js文件，在文件中添加一下代码 import Vant from 'vant'; import { Toast } from 'vant'; Vue.use(Vant); 3.进行了以上操作后我们只需要在所用到的页面中直接使用组件
HBuilderX（uni-app）搭建小程序流程（请求封装，下拉刷新，底部加载等）
xiaolouuuu的博客
12-10 1489
uni-app是一个跨平台的前端框架，用于开发。uni-app提供了一个统一的 API，允许开发者编写一次代码，最终部署到多个平台，极大地提高了开发效率。在编写小程序的时候和原生微信开发者工具语法略有区别。
uni-app【微信小程序】顶部tab栏与页面内容联动
qq_43015778的博客
03-15 1581
uniapp 微信小程序 点击tab切换下面的页面信息；滑动下面的页面信息tab也进行切换。
uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水.zip
04-03
而"说明.txt"可能包含了关于如何使用和安装uView的指导，以及可能存在的更新日志和注意事项。 总的来说，uView UI 是uni-app生态中的一个重要组成部分，它的强大功能和易用性使得它成为开发者构建跨平台应用的首选...
uniapp 组件内onLoad里调用的方法不执行
qwyio的博客
05-19 2323
问题背景： 考虑到代码的复用性，对部分代码进行了封装，在组件内去初始化接口数据，却迟迟没有接口响应，经过最终的排查，发现问题出现在uniapp的生命周期上。 uniapp官方文档上明确写出：uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。组件里没有页面级的onLoad等生命周期 uni-app的组件中可以直接使用Vue的生命周期函数进行处理 解决方案： 使用vue的生命周期函数 mounted mounted(){ } ...
uni-app入门:小程序UI组件Vant Weapp
weixin_43401380的博客
11-29 2136
uni-app入门实战:小程序UI组件Vant Weapp的使用与说明
uniapp引入Vant Weapp
m0_48259951的博客
03-24 822
在项目根目录下创建文件夹wxcomponents/vant，注意wxcomponents与pages同级。github官网下载代码包，解压，把解压文件夹里的dist 文件copy到第一步创建的vant文件里。里引入具体组件，可以局部引入也可以全局引入。uniapp引入Vant Weapp。uniapp自带的一些组建无法满足。局部引入： 在需要使用组件的。，引入Vant Weapp。
记录uniapp集成vant遇到的问题
lin13958756858的博客
12-10 1976
需求：用uniapp做h5开发，需要用到第三方UI库。 步骤： 1.vant下载地址：GitHub - youzan/vant-weapp: 轻量、可靠的小程序 UI 组件库 2.复制UI库：将下载或者clone下来的dist文件悉数拷到uniapp创建的根目录下的wxcomponents 【ps:wxcomponents此文件需要自己手动创建，且名称不能更改，具体看uni-app官网】，此处我的目录结构为下图所示 3.引入UI库：首先在app.vue文件里面 @import "/w.
uniapp使用vant ui方式
u013141712的专栏
06-15 940
参考链接： https://www.jianshu.com/p/5dcada1d8f8d 里面github参考：
uniapp中使用vant wappp
m0_70647189的博客
05-09 1345
 <style lang="scss"> .custom-button { .van-button { background-color: blue; border-radius: 10px; } } </style> 如果你的style样式中存在scoped，我们可以利用vue中的语法，加个/deep/进行样式覆盖，如下所示：  <style lang="scss" scoped>
表单验证与输入框的clearable属性冲突的问题
weixin_39944879的博客
07-27 1015
vue表单验证与输入框的clearable属性冲突的问题 当表单验证里添加dialog时，里面的输入框的clearable属性会产生两个XX，去掉表单验证clearable会恢复正常
微信小程序知识点整理(六)——自定义组件
泊一的博客
12-22 1923
文章目录一、小程序组件 -- 创建与引用1. 组件的创建2. 组件的引用二、小程序组件 -- 组件的样式三、小程序组件 -- 数据与方法1. 使用 data 定义组件的私有数据2. 使用 methods 定义组件的事件处理函数3. 组件的 properties3.1 properties 简介3.2 声明 properties 的两种方式3.3 为组件传递 properties 的值3.4 ...
打造高效二手交易体验：UNI-APP二手市场APP模板
七、注意事项 1. 版权问题：使用此模板进行商业开发时需注意检查模板的授权协议，避免侵犯原创者的权益。 2. 定制化需求：根据实际业务需求进行模板的定制开发，以满足特定市场定位或用户需求。 3. 性能优化：在...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值