步骤一：
打开cmd，输入npm i -y
步骤二：
通过npm安装：npm i @vant/weapp -S --production
步骤三：
打开微信小程序开发 详情----本地设置----使用npm模块勾上
步骤四：
点击工具，选择构建npm
步骤五：
将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
Icon图标
引入
在app.json或index.json中引入组件，详细介绍见快速上手。
"usingComponents": {
"van-icon": "@vant/weapp/icon/index"
}
基础用法：
Icon的name属性支持传入图标名称或图片链接。
<van-icon name="close" />
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
提示信息：
设置dot属性后，会在图标右上角展示一个小红点。设置info属性后，会在图标右上角展示相应的徽标。
<van-icon name="chat" dot /> // dot 是否显示图标右上角小红点
<van-icon name="chat" info="9" /> //info 图标右上角文字提示
<van-icon name="chat" info="99+" />
图标颜色：
设置color属性来控制图标颜色。
<van-icon name="chat" color="red" />
图标大小：
设置size属性来控制图标大小。
<van-icon name="chat" size="50px" />
自定义图标:
如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。例如，可以在 app.wxss 文件中引入。
/* 引入第三方或自定义的字体图标样式 */
@font-face {
font-family: 'my-icon';
src: url('./my-icon.ttf') format('truetype');
}
.my-icon {
font-family: 'my-icon';
}
.my-icon-extra::before {
content: '\e626';
}
<!-- 通过 class-prefix 指定类名为 my-icon -->
<van-icon class-prefix="my-icon" name="extra" />
