微信小程序：vant weapp组件库在mpvue中实践

Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。
官方文档

前言

除了Vant WeappUI组件库之外，还有一些其他热门组件库可供选择。

• WeUI : WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

• iView Weapp : iView是TalkingData发布的一款高质量的基于Vue.js组件库，而iView weapp则是它们的小程序版本。

• MinUI : MinUI 是蘑菇街前端开发团队开发的基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库，适用场景广，覆盖小程序原生框架，各种小程序组件主流框架等，并且提供了专门的命令行工具。

• Wux Weapp : Wux WeApp是一个非常不错的微信小程序自定义 UI 组件库。

本文以Vant Weapp为例，学习如何在mpvue中使用。原生开发安装参考官方文档。

在使用到遇到问题：首先到Github Issues查找解决方案。

另外，在mpvue使用vant-weap存在一些兼容问题，可以通过修改源码解决。

安装

在mpvue中，不可以使用npm直接安装，由于node_modules目录下代码是不会被编译进dist目录中，所以只能通过手动获取导入到项目中。

获取源码：

git clone https://github.com/youzan/vant-weapp.git

将dist目录下的所有文件复制到static/vant目录下。

└── static
    └── vant
        ├── action-sheet   					上拉菜单
	    ├── area 									省市区选择
	    ├── badge 								徽章
	    ├── badge-group 						徽章组和徽章一起使用
	    ├── button 								按钮
	    ├── card 									商品卡片
	    ├── cell 										单元格
	    ├── cell-group							单元格组和单元格一起使用
	    ├── checkbox							复选框
	    ├── checkbox-group				复选框组
	    ├── collapse								折叠面板
	    ├── collapse-item						折叠面板项
	    ├── datetime-picker					时间选择
	    ├── dialog									弹出框
	    ├── field									输入框
	    ├── goods-action						商品导航：商品详情页底部样式
	    ├── goods-action-button
	    ├── goods-action-icon
	    ├── icon									图标
	    ├── loading								加载
	    ├── nav-bar								导航栏
	    ├── notice-bar							通告栏：跑马灯滚动字幕效果
	    ├── notify									消息通知
	    ├── panel									面板
	    ├── picker									选择器
	    ├── picker-column
	    ├── popup									弹出层
	    ├── progress								进度条
	    ├── r