第一步：新建终端初始一个包的描述
第二步： 通过 npm 安装
# 通过 npm 安装
npm i @vant/weapp -S --production
安装完成后文件目录处会增加一个node_modules文件(在nodejs中可以直接使用)，现在在小程序中需要构建成小程序所能识别的包，点击工具选择构建npm。
第三步：修改 app.json
去除app.json中的 "style": "v2"，小程序的新版基础组件强行加上了许多样式难以覆盖，不删除会导致样式混乱。
第四步：修改 project.config.json
开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。
第五步：使用Vant组件
在app.json(全局)或index.json(当前)中引入组件
"usingComponents": { "van-field": "@vant/weapp/field/index"}
Button 按钮
引入
"usingComponents": { "van-button": "@vant/weapp/button/index"}
按钮类型
支持default、primary、info、warning、danger五种类型，默认为default。
<van-button type="default">默认按钮</van-button>
朴素按钮
通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
<van-button plain type="primary">朴素按钮</van-button>
<van-button plain type="info">朴素按钮</van-button>
禁用状态
通过disabled属性来禁用按钮，此时按钮的bind:click事件不会触发。
<van-button disabled type="primary">禁用状态</van-button>
<van-button disabled type="info">禁用状态</van-button>
加载状态
<van-button loading type="primary" />
<van-button loading type="primary" loading-type="spinner" />
<van-button loading type="info" loading-text="加载中..." />
按钮形状
<van-button square type="primary">方形按钮</van-button>
<van-button round type="info">圆形按钮</van-button>
Popup 弹出层
介绍
弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。
基础用法
通过show属性控制弹出层是否展示。
<van-cell title="展示弹出层" is-link bind:click="showPopup" />
<van-popup show="{{ show }}" bind:close="onClose">内容</van-popup>
Page({
data: {
show: false,
},
//显示弹出层
showPopup() {
this.setData({ show: true });
},
//关闭弹出层
onClose() {
this.setData({ show: false });
},
});
弹出位置
通过position属性设置弹出位置，默认居中弹出，可以设置为top、bottom、left、right。
<van-popup
show="{{ show }}"
position="top"
custom-style="height: 20%;"
bind:close="onClose"
/>
