Vant Weapp 官网文档:介绍 - Vant Weapp (gitee.io)
Vant Weapp GitHub地址:youzan/vant-weapp: 轻量、可靠的小程序 UI 组件库 (github.com)
本教程使用下载代码方式引入vant组件
1. 下载vant组件源码
- 通过git下载vant源码
git clone https://github.com/youzan/vant-weapp.git
- 将vant源码路径下的dist文件夹复制到微信小程序项目中
2. 使用vant组件
- 将app.json下的
"style": "v2"
去除,微信小程序在新版基础组件中强行加了许多样式,若不去除该内容,会造成组件部分样式混乱 - 在引入vant组件时,只能根据需要,一个组件一个组件往配置项里面添加,无法一次将所有组件全部引入
2.1 全局引入
- 在app.json下配置
usingComponents
配置项即可全局引入vant组件。 - 引入方式:
"van-组件名": "组件所在路径/index"
2.2 局部引入
- 对于不太常用的组件,可使用局部引入的方式进行引入
- 局部引入只需在wxml对应的json文件中配置
usingComponents
即可 - 局部引入的方式于全局引入相同