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。

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

相关推荐
—Qeyser1 分钟前
好看的背景颜色 uniapp+小程序
小程序·uni-app·uniapp·微信小游戏
2501_916008894 分钟前
uni-app iOS 日志与崩溃分析全流程 多工具协作的实战指南
android·ios·小程序·https·uni-app·iphone·webview
2501_915921431 小时前
iOS混淆工具实战 在线教育直播类 App 的课程与互动安全防护
android·安全·ios·小程序·uni-app·iphone·webview
织_网3 小时前
UniApp 页面通讯方案全解析:从 API 到状态管理的最佳实践
前端·javascript·uni-app
yuehua_zhang5 小时前
uni app 的app端 写入运行日志到指定文件夹。
前端·javascript·uni-app
2501_915106325 小时前
Charles抓包工具在接口性能优化与压力测试中的实用方法
ios·性能优化·小程序·https·uni-app·压力测试·webview
2501_9159090621 小时前
uni-app iOS 上架常见问题与解决方案,实战经验全解析
android·ios·小程序·https·uni-app·iphone·webview
编程猪猪侠1 天前
uni-app与Vue3,实现3D圆柱形旋转画廊效果
3d·uni-app
BUG创建者1 天前
uniapp vue页面传参到webview.nvue页面的html或者另一vue中
vue.js·uni-app·html
编程迪1 天前
找活招工系统源码 雇员雇主小程序 后端JAVA前端uniapp
java·spring boot·uni-app