目录

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。

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

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
web_Hsir7 小时前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir7 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
fakaifa9 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
耶啵奶膘11 小时前
uni-app:firstUI框架的选择器Select改造,添加一个搜索的插槽
前端·uni-app
程序猿看视界1 天前
Uni-app页面信息与元素影响解析
uni-app·状态栏·安全区域·窗口信息·像素比
清晨細雨1 天前
UniApp集成极光推送详细教程
android·ios·uni-app·极光推送
_未知_开摆1 天前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app
Li_na_na011 天前
解决安卓手机WebView无法直接预览PDF的问题(使用PDF.js方案)
android·pdf·uni-app·html5
web_Hsir1 天前
uniapp 微信小程序项目中 地图 map组件 滑动面板
微信小程序·uni-app·notepad++
平凡的阿泽1 天前
uniapp编译的app在ios上内存泄漏了
uni-app