uniapp的h5端和小程序端同时引入vant-weapp和遇到的报错

最新推荐文章于 2024-01-30 02:28:08 发布
最新推荐文章于 2024-01-30 02:28:08 发布
阅读量2k 收藏 3
点赞数 2
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44730534/article/details/121515321
版权
本文介绍了在uniapp中如何同时为H5和小程序端引入vant-weapp组件库，详细列出了配置的usingComponents代码，并提到了在实际使用过程中可能遇到的报错情况及解决方案，展示了不同端的效果图。
摘要由CSDN通过智能技术生成

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”,
“van-image”: “/wxcomponents/vant/image/index”,
“van-row”: “/wxcomponents/vant/row/index”,
“van-col”: “/wxcomponents/vant/col/index”,
“van-popup”: “/wxcomponents/vant/pop

最低0.47元/天 解锁文章
鑫甫
关注
uniapp - 解决引入使用vant组件库时出现报错 Module build failed (x) SyntaxError | @import ‘../common/index.css‘；.van
高级前端工程师
08-08 4100
uniapp，vantUI，有赞组件库，报错，uniApp适用vant组件库控制台出现一大片报错，解决uniapp项目中使用vant Weapp图标组件报错问题，UniApp中引入VantUI后出现报错@import ‘../common/index.css‘；.van-icon{text-rendering:auto；-webkit-font-smoothi，HbuildX中uniapp引入vant出现的报错：Module，详细解决办法，出错，还是不行，有问题，引入VantUI后，运行发现报错了，怎么办，
uni-app 多端操作引入vant 避坑亲测版~
a895544608的博客
02-10 2153
uni-app 小程序 h5引入vant 实测版！
uniapp 微信小程序和h5共用vant weapp记录
luoob假的开发者哈哈哈
01-24 2184
从 uniapp 官方可知在 HbuilderX 2.4.7起，h5 和 小程序的组件实现了共享 uniapp 引入 vant weapp 在项目目录 在项目目录下新建 wxcomponents 文件夹 如果是通过 HbuilderX 建的项目，则在项目根目录新建 wxcomponents 文件夹 如果是通过脚手架创建的项目，在 src 目录中新建 wxcomponents 文件夹 进入 vant 组件官网 vant 入口 通过 npm/yarn 下载下来或者直接到 github 找到构建好的
【前端 Uniapp】使用Vant打造Uniapp项目（避坑版）
最新发布
Qianmoer的博客
01-30 7536
Uniapp 是基于 Vue.js 的开发框架，通过一套代码可以同时发布到多个平台的应用框架。而 Vant 是针对移动端 Vue.js 的组件库。通过这样的组合，我们可以快速构建出一个跨平台的移动应用。Vant 已经支持多种小程序和 H5 平台，也对 Uniapp 实现了完美的支持。我们可以使用 Vant 提供的丰富的组件和功能，来快速开发一个漂亮、易用的移动应用。
vant ui 官方文档_kbone-ui腾讯官方出品能同时支持 小程序和H5应用
weixin_39580682的博客
11-30 684
今天我们来看一看，腾讯官方出品的一个框架，kbone-ui，据说是兼容小程序和H5,框架整体还是挺优秀的，只不过前期有点小坑，也许是我学艺不精有些地方搞不明白，还特意的加了官方的QQ群，在里面请教大佬。以下内容是我在官方找了一些框架的主要信息。官方介绍kbone-ui 是一个能同时支持 小程序(kbone) 和 vue 框架开发的多端 UI 库。kbone 框架是用来对齐 Web 和 小程序多端的...
taro-vant:基于taro2进行多端组件开发，迁移vant-weapp的组件库，兼容h5，微信小程序端，支付宝小程序端
03-17
芋头 基于taro2进行多端组件开发，迁移vant-weapp的组件库，兼容h5，微信小程序端，支付宝小程序端。 安装 npm i taro-vant yarn add taro-vant 使用前需要配置 因为我希望这个组件是可以用小程序原始组件混合编写的，但是嵌套的Taro build -ui生成出来的组件是不行的（我看taro-ui的编译配置方式，测试配置之后结果）， 所以研究了几天弄了一个taro的配置和插件，因此并发症的组件和自己项目写的代码一样进行编译。 因为为什么使用.temp文件夹，是因为taro的临时文件夹名称也是.temp，所以这个一般都会写入.gitignore，而这个文件夹应该是不需要添加到版本管理中的。 注意：小程序中，修改了webpack配置resolve.symlinks resolve.symlinks: false ，不知道这个是否会影响 // con
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(前面加空格全局替换(引入的字体图标路径有问题
使用uni-app + vant-weapp 发布到H5以及小程序遇到的问题
HWJBJ的博客
01-21 3010
使用uni-app + vant-weapp 发布到H5以及小程序遇到问题记录 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码
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
记录uniapp集成vant遇到的问题
lin13958756858的博客
12-10 1842
需求：用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.
uni-app整合vant、nuxt
hahahhahahahha123456的博客
04-30 3068
创建uni-app移动端项目使用uni-cli下载 vue create -p dcloudio/uni-preset-vue my-project 下载Nuxt框架 ,无需使用create-nuxt-app. 脚手架 yarn add nuxt 配置package.json文件 { "name": "my-app", "scripts": { "dev": "nuxt", "build": "nuxt build", "generate": ...
关于uniapp引入Vant Weapp第三方组件，遇到的问题和解决方式
inticaler的博客
01-27 4833
1.在根目录下创建wxcomponents 2.引入vant weapp 1.我们到https://github.com/youzan/vant-weapp下载最新的压缩包 2.解压，将里面的dist文件夹复制粘贴到wxcomponents目录下,并改名为vant 3. 在根目录下App.vue中引入UI样式index.wxss，如下图 @import "/wxcomponents/vant/common/index.wxss"; 4. 在pages.json页面将vant的组件.
vue2.x错误 - Do not use built-in or reserved HTML elements as component id: header
m0_37148591的博客
12-09 8284
前言 日常积累,欢迎指正 错误原因 vue 组件名称(name 属性) 与 HTML5 标签名称冲突，注意 vue 组件命名不要与已有标签一致即可
UniApp开发H5引入Vant
Master_Tang的博客
10-19 2652
第一步：下载安装vant 第二步：main.ts引入Vant 不管是js还是ts，Vue.use()他就对了也可以结构后按需导入 第三步：App.vue中引入全局样式，两种import都试试，里面坑多 第四步：就可以使用它了Vant 3 - Lightweight Mobile UI Components built on VueLightweight Mobile UI Components built on Vuehttps://vant-contrib.gitee.io/vant/#/
uniapp开发微信小程序/h5完整流程，含vant/uview(h5适配vw)
张伟的专栏
05-02 584
uniapp开发微信小程序/h5完整流程，含vant/uview(h5适配vw)_热爱生活的大辉的博客-CSDN博客
uniapp使用Vant-weapp（最新）
shmilynn_的博客
01-11 6685
目录1.先正常创建一个uniapp项目2.从github下载vant包，zip格式的3.项目根目录下新建wxcomponents/@vant 两个文件夹文件夹 4.把下载好的压缩包解压，放在刚才创建好的@vant文件下，并重命名为weapp5.App.vue中引入vant的样式 6.在pages.json文件下的 "globalStyle" 下的"usingComponents" 中按需引入7.页面中使用，如果没有样式从uniapp重启微信小程序总结： vant组件包https://github.com/
uniapp 在h5模式下，uniapp默认图标不显示
mumu176699的博客
07-22 748
加截这个插件，才会自动加入字体，显示首页的图标。原因未知，用默认的图标class,无法显示。引入一个插件，才会自动加载字体文件，显示图标。
2022年在uniapp中引入vant Weapp
前端如逆水行舟...
11-07 2052
2022年11月7号亲测有效，我也在引入vant时出现了很多问题，在引入时个人感觉uview比vant好引入
微信小程序快速集成vant-weapp教程
微信小程序引入 vant-weapp 是为了在小程序开发中使用 vant 这个流行的移动端 UI 库，它提供了丰富的组件和样式，帮助开发者快速构建美观的用户界面。 vant-weapp 是 vant UI 专门为微信小程序定制的版本。 1. **...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值