vant-weapp 快速上手

背景知识
使用 Vant Weapp 前，请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍。

安装
1、用小程序工具初始化项目

2、在项目根目录下添加npm能力，否则报错 微信小程序 没有找到可以构建的npm包

npm init
# 一路默认回车
# 然后执行，通过 npm 安装
npm i @vant/weapp -S --production

3、用小程序工具进行npm编译测试

如果执行成功，会看到如下界面

4、引入组件测试，我们用van-button组件测试
为引入之前

引入步骤：
1）在app.json中引入组件（全局引入）

"usingComponents": {
    "van-button": "miniprogram_npm/vant-weapp/button/index"
  }

2）在index.wxml中，改写代码
将

<button  wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 button>

改写成

<van-button type="info" wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 van-button>

最终编译按钮效果为：

组件引入成功了！
参考文档
1、Vant Weapp官网
2、小程序简易教程
3、自定义组件