记录uniapp集成vant遇到的问题

最新推荐文章于 2024-07-01 12:13:01 发布

小黄鸭保佑

最新推荐文章于 2024-07-01 12:13:01 发布

阅读量1.8k

点赞数 1

分类专栏：个人学习文章标签：小程序 vue.js 前端前端框架

本文链接：https://blog.csdn.net/lin13958756858/article/details/121864137

版权

本文记录了使用uniapp开发H5时，集成 vant UI 库的步骤及遇到的两个问题。首先，从GitHub下载 vant-weapp，并将dist文件放入uniapp的wxcomponents目录。然后，在app.vue引入UI库，并在pages.json中添加组件引用。集成过程中遇到了模块构建失败和TypeError，通过在CSS中修正逗号后空格和修复version.js文件内容，成功解决了问题。

摘要由CSDN通过智能技术生成

需求：用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 "/wxcomponents/vant/dist/common/index.wxss"

4.在pages.json文件内添加组件引用

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小黄鸭保佑

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

微信小程序动态导航栏（uniapp + vant）

954L

12-19

1267

vant小程序版本：[https://vant-contrib.gitee.io/vant-weapp/#/home](https://vant-contrib.gitee.io/vant-weapp/#/home) 注：vant并没有uniapp的版本，所以此处是引入小程序版本的ui

Uniapp引入vant-weapp

Tfishupupup的博客

08-08

4989

vant引入uniapp，引入过程及问题记录

2 条评论您还未登录，请先登录后发表或查看评论

uniapp是否可以用vant等移动端UI库、使用步骤以及需要注意的问题

商务合作 / 项目定制开发 / 前端一对一培训、答疑

12-04

7225

解决方法，修改 ~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后，导入样式，报错。

uni-app中使用vant注意事项

soooyoung的博客

12-08

6613

需要下载vant的weapp版源码，将dist目录复制到uniapp项目中，路径：项目/wxcomponents/vant 引入后hbuilderx会自动给每个组件生成一个vue文件，但是会包一层uni-shadow-root，如果同时使用uni官方的组件且是通过easycom的custom使用的，则会冲突，需要将正则改为^uni-((?!(shadow-root)).) 如果报了vant的css错误（Unclosed bracket），则全局搜索https://img.yzcdn.cn/vant/van.

uniapp项目h5端使用vant组件

jdsfui的博客

01-19

7783

在做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.进行了以上操作后我们只需要在所用到的页面中直接使用组件

uniapp写h5/小程序引入vant-weapp步骤以及报错

qq_16828495的博客

12-06

2447

1.下载vant-weapp的dist文件 2.在项目中创建一个文件叫wxcomponents，注意这个文件和page文件平级，引入dist 注意文件名一定要是wxcomponents（莫名其妙的坑）， 3.APP.VUE里引入样式 4.pages.json全局注册 5.报错引入css报错 index.wxss里的 url(前面加空格全局替换(引入的字体图标路径有问题

vue2.x错误 - Do not use built-in or reserved HTML elements as component id: header

m0_37148591的博客

12-09

8284

前言日常积累,欢迎指正错误原因 vue 组件名称(name 属性) 与 HTML5 标签名称冲突，注意 vue 组件命名不要与已有标签一致即可

uni-app 使用vant 组件时候报错Unclosed bracket

c1824338832的博客

10-12

395

在所有format('woff')，后面加空格。

uniapp引入vant组件

g15896871079的博客

11-19

3914

Vant官网https://youzan.github.io/vant/#/zh-CN/ 点击官网右上角跳转到小程序版vant(方便查看文档) 1.在根目录下创建一个文件夹格式如下wxcomponents>vant>dist 2.前往https://github.com/youzan/vant-weapp下载压缩文件 3.App.vue的style中引入样式 @import “/wxcomponents/vant/dist/common/index.wxss”; 4.使用:在pages

uniapp引入vant和color组件

weixin_44893500的博客

03-26

3953

Uniapp使用vant Weapp图标组件报错问题

天码星空

03-05

1027

1.异常信息问题解决参考：https://blog.csdn.net/it_cgq/article/details/111991644 11:43:21.725 Module build failed (from ./node_modules/postcss-loader/src/index.js): 11:43:21.725 SyntaxError 11:43:21.735 (36:10521) Unclosed bracket 11:43:21.736 34 | 11:43:21.741 3

实战避雷记录 | 关于uni开发小程序引入vant weapp事件失效

zerobiu的博客

03-08

1089

①最初引用vant开发小程序的时候是原生开发，此次用uniapp开发小程序项目时也想着引入使用下。②结果遇到的问题是展示内容比如输入框这种的都可以，但是点击事件的时候出不来效果。③一开始想着是不是版本用错了，后面看了下文档针对小程序的版本就是weapp的。把usingComponents挪到globalStyle里面全局引入就好了。不能在pages中局部引入组件。一顿试错之后，发现原来。

uniapp中引入vant Weapp

qq_46239275的博客

01-06

1414

uniapp如何引入vant Weapp

uniapp安装vant并解决样式引入报错

qq_44741577的博客

03-16

1444

unaipp引入vant组件库的时候，按照官网的步骤，一直报错。

uniapp导入使用vant-weapp组件

cuilinlong的博客

05-13

2242

将npm或刚下载的文件vant-weapp中的dist文件夹复制到wxcomponents文件夹中，并将dist文件夹重命名为vant。安装完毕后会出现node_modules目录，及vant的weapp文件夹。右键单击项目目录，使用命令行窗口打开所在目录，在终端输入命令，安装vant。方法二：通过GitHub下载vant-weapp，完成后解压。方法一：如果电脑已经安装了node，可以通过npm安装。在项目根目录下创建wxcomponents文件夹。在相应页面中使用vant组件。

mpvue微信小程序+vant时，upload组件无法进入after-read等回调函数

wly_er的博客

05-21

3100

问题：在使用mpvue开发小程序时，上传图片一直不能进入after-read回调函数。解决办法：发现是不能识别短横线。因此需要改组件的源码。第一步：修改vant组件里面的uploader/index.js文件。找到after-read，换成afterRead。第二步：在组件使用的时候，同步将after-read 替换成 afterRead 此时，就能进入到afterRead的回调函数啦。若其他回调也无法进入，可能也是这个原因，可同理进行修改。（未测试，个人认为） ...

uni-app在微信小程序中vant包报错的问题（useragent of undefined）

最新发布

first_idiot的博客

07-01

754

在微信小程序中，使用了vant1，并且在 wxcomponents 中额外手动导入的 dist文件夹，并且在pages.json中手动注册（全局/局部都可以）；在自己的页面中，实际上是不需要在按需导入vant包了，按文章最开头的链接中，只要在main.js全部引入（按需引入也可以，对应在vant2官网的方法修改）。如果在.vue文件或者.nvue中再引入，微信便会认为你的引入是在node_modules中的包，所以导致了这次报错。实际是粗心导致的，忘记了自己在这个页面中又引入过。

uniapp使用vant-weapp中的van-field标签时，无法双向绑定数据，以及van-field标签的校验

Gewenjuan_0309的博客

09-14

2352

解决办法如下：用原生的form标签包裹van-field标签，给van-field标签绑定blur事件（注意：想要实时获取值，可使用change事件），使用进行赋值操作（注意：change事件中，用e.detail赋值。

uni-swipe-action组件函数调用报错VM1173 WAService.js:2 TypeError: Cannot read property ‘userAgent‘ of undefin

qq_46159033的博客

08-16

907

在和根目录(和package.json同级)添加vue.config.js文件。

uniapp开源项目

09-14

uniapp是一个基于Vue.js的跨平台开发框架，它可以用于快速开发同时支持多个平台的应用程序，包括iOS、Android、H5等。uniapp的开源项目有很多，以下是一些比较知名的uniapp开源项目： 1. uni-app：uni-app是官方提供的一个示例项目，其中包含了一些常见的示例和案例，对于初学者来说非常有帮助。你可以在GitHub上找到它。 2. DCloud-uni-APP-WeChat：这是一个基于uniapp开发的仿微信应用程序，它实现了一些基本的微信功能，例如聊天、发表动态、朋友圈等。你可以在GitHub上找到它。 3. uni-app-preset-vant：这是一个使用uniapp和Vant组件库开发的基础项目模板，它集成了Vant组件库，可以帮助你快速构建uniapp应用程序。你可以在GitHub上找到它。这只是一些uniapp开源项目的例子，你可以通过在GitHub或其他开源代码托管平台上搜索"uniapp"关键词来找到更多的开源项目。希望这些项目对你有所帮助！