uniapp中引入Vant Weapp的保姆级教学(包含错误处理)

废话不多说,直接上方法,网上的教学好多都是错误的

1.安装vant weapp

在Hbuilder的终端,输入以下代码

javascript 复制代码
npm install @vant/weapp -S --production

2.新建wxcomponents文件夹

在项目的跟目录新建一个"wxcomponents'文件夹,与app.vue同级,用于存放我们的组件库

3.复制组件库

将vant weapp的包复制到wxcomponents文件夹中

路径:

将dist文件夹复制到wxcomponents中,重命名为vant(当然叫别的也可以,但是一会引入组件的路径也要相应更改)

4.全局引入组件样式

在app.vue文件中的style里面,引入样式文件

代码可直接复制

javascript 复制代码
@import "wxcomponents/vant/common/index.wxss";

5.引入组件

在pages.json中引入自己想用的组件

全局引入

javascript 复制代码
"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "爱尼家政",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"usingComponents": {
			"van-button": "/wxcomponents/vant/button/index"
		}
	},

局部引入

javascript 复制代码
{
	"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "爱尼家政",
			"usingComponents": {
			"van-button": "/wxcomponents/vant/button/index"
		}
	}

},

6.引入完成不显示错误处理

如果你按照上面的方式一步一步的都引入了,正常来讲,肯定是可以显示了,首先可以试试清除一下微信开发者工具的缓存,或者重启Hubilder。

然后,看一下微信开发者工具的设置,路径:设置---项目设置,把'上传时过滤无依赖文件'关掉,清除缓存,重新运行,就是这个设置卡我了好久🤬,他还没有报错提示🤣

相关推荐
2501_916007472 小时前
HTTPS 抓包乱码怎么办?原因剖析、排查步骤与实战工具对策(HTTPS 抓包乱码、gzipbrotli、TLS 解密、iOS 抓包)
android·ios·小程序·https·uni-app·iphone·webview
Q_Q5110082853 小时前
python+django/flask+uniapp基于微信小程序的瑜伽体验课预约系统
spring boot·python·django·flask·uni-app·node.js·php
性野喜悲3 小时前
uniapp+<script setup lang=“ts“>解析后端返回的图片流并将二维码展示在页面中
uni-app
卷Java4 小时前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
笨笨狗吞噬者7 小时前
【uniapp】小程序端实现分包异步化
前端·微信小程序·uni-app
2501_916008898 小时前
HTTPS 双向认证抓包实战,原理、难点、工具与可操作的排查流程
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915106328 小时前
HTTPS 能抓包吗?实战答案与逐步可行方案(HTTPS 抓包原理、证书Pinning双向认证应对、工具对比)
网络协议·http·ios·小程序·https·uni-app·iphone
游戏开发爱好者88 小时前
App HTTPS 抓包实战,原理、常见问题与可行工具路线(开发 测试 安全 角度)
网络协议·安全·ios·小程序·https·uni-app·iphone
2501_915106328 小时前
App HTTPS 抓包实战指南,原理、常见阻碍、逐步排查与工具组合
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9159214315 小时前
Charles 抓包 HTTPS 原理详解,从 CONNECT 到 SSL Proxying、常见问题与真机调试实战(含 Sniffmaster 补充方案)
android·网络协议·小程序·https·uni-app·iphone·ssl