vant UI 组件库是有赞前端团队开发的一个 Vue 组件库，提供了一整套的 UI 基础组件和业务组件，通过 vant 可以快速搭建出风格统一的页面。
官方地址：vant UI 组件库
安装
- 安装 vant 组件库：
npm i @vant/weapp -S --production
- 修改 app.json
将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
- 本地设置勾选 npm 模块。
勾选 npm模块.png
- 构建 npm
工具 -> 构建 npm
使用
- 相应 json 页面引入组件
"usingComponents": {
"van-circle": "@vant/weapp/circle/index"
}
- 使用
<van-circle value="{{ 30 }}" text="text" />
效果：
van-circle.png
使用 vant 内置样式
内置样式：https://vant-contrib.gitee.io/vant-weapp/#/common
Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。
- app.wxss 中引入
@import 'miniprogram_npm/@vant/weapp/common/index.wxss';
- 使用
<!-- 单行超出省略 -->
<view class="van-ellipsis" style="width:100px">
这是一段宽度限制 250px 的文字，后面的内容会省略。
</view>
<!-- 最多显示两行 -->
<view class="van-multi-ellipsis--l2">
这是一段最多显示两行的文字，后面的内容会省略。
</view>
<!-- 最多显示三行 -->
<view class="van-multi-ellipsis--l3">
这是一段最多显示三行的文字，后面的内容会省略。
</view>
添加1px 边框，为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。如果不是基于伪类实现的，则我们在添加的 1px 边框在 Retina 下默认是 2px 。
<!-- 上下边框 -->
<view class="van-hairline--top-bottom"></view>
