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_916007471 小时前
iPhone查看App日志和系统崩溃日志的完整实用指南
android·ios·小程序·https·uni-app·iphone·webview
2501_915918414 小时前
iOS 抓不到包怎么办?全流程排查思路与替代引导
android·ios·小程序·https·uni-app·iphone·webview
HebyH_4 小时前
uniapp如何封装uni.request 全局使用
uni-app
随笔记21 小时前
uniapp蓝牙连接设备并发送接收信息
javascript·uni-app·app
脑袋大大的21 小时前
从“PPT动画”到“丝滑如德芙”——uni-app x 动画性能的“终极奥义”
前端·javascript·nginx·uni-app·uniapp·app开发·混合开发
随笔记21 小时前
uniapp开发的app原生操作手机系统文件
前端·javascript·uni-app
于慨1 天前
uniapp上传文件
前端·uni-app
猫头_1 天前
uni-app 转微信小程序 · 避坑与实战全记录
前端·微信小程序·uni-app
iOS阿玮1 天前
凭一己之力干穿一个品牌,互联网+时代口碑比以前更重要了!
uni-app·app·apple
前端amanda1 天前
uniapp中uview组件中u-input格式化后赋值踩坑
前端·javascript·uni-app