前言：其实用uni-app开发微信小程序的首选不应该是vant，因为vant没有专门给uni-app设置专栏，可以看到目前Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。
但是vant的优势在于用什么引入什么，相比uview-plus更节省性能，所以有一些项目考量会选用vant，遂以作记录。
一、下载vant依赖包
https://github.com/youzan/vant-weapp
二、项目中引入vant
在uni-app项目根目录中创建一个文件夹“wxcomponents”，再新建一个文件夹“@vant”，再新建一个文件夹“weapp”（这样的目录结构是为了和官网推荐保持一致到时候好复制，不想这样写也OK）
再将下载好的vant文件里面的dist的内容拷贝到“wxcomponents”里面
三、使用vant组件
在uni-app中，要使用vant的任何组件，都需要先在pages.json文件中引入对应的组件
引入方式分为两种：
- 全局引入
- 局部引入
首先在官网中选择你要使用的组件，官网地址：Vant Weapp - 轻量、可靠的小程序 UI 组件库
1、全局引入
pages.json：
将你想要用的组件引入语句复制进去，注意我们和官网稍有不同，我们外层还有个wxcomponents文件夹
"globalStyle": {
//全局引入第三方的UI框架
"usingComponents": {
//需要什么组件就引入什么组件
"van-loading": "wxcomponents/@vant/weapp/loading/index"
}
},2、局部引入
pages.json：在pages里面配置，写法不变
"pages": [
//...
{
"path": "pages/mine/mine",
"style": {
"navigationBarTitleText": ""
},
//引入第三方的UI框架
"usingComponents": {
"van-notify": "wxcomponents/@vant/weapp/notify/index"
}
}
],四、使用组件
将官网中的演示代码复制过来即可
<van-loading /> <van-loading type="spinner" />
五、 举例使用Rate评分组件，对比官网代码和uni-app代码
官网代码：
<van-rate value="{{ value }}" bind:change="onChange" />
可以看到官网的示例代码是原生微信小程序的代码，这个时候就不能一味的只复制了，
需要改成：
<van-rate :value="value" @change="onChange" />
这样看着就清楚多了
