uni-app引入UI组件库Vant-weapp

1,官网组件有关介绍参考。
在这里插入图片描述
2,使用npm安装或下载安装包:vant-weapp

3, 项目中引入vant-weapp组件步骤。
① 在根目录下创建 wxcomponents文件夹。
② wxcomponents文件夹下新建vant文件夹。
创建完成后的目录结构 ↓
在这里插入图片描述
③ 将dist目录复制粘贴到新建的vant文件夹中。
在这里插入图片描述
④ 在App.vue文件里进行以下操作。
在这里插入图片描述

@import "/wxcomponents/vant/dist/common/index.wxss";

⑤ 在pages.json文件里进行以下操作。

在这里插入图片描述

"usingComponents":{
	"van-button": "/wxcomponents/vant/dist/button/index"
}

在这里插入图片描述
⑦效果。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值