小程序中引入vant

小程序开发者工具有一个坑,引入完之后会找不到utils这个包,重启一下工具重新编译就Ok了,好坑

引入的步骤如下:
1、右键点击你的小程序miniprogram,选择在终端打开小程序中引入vant_第1张图片
2、输入命令npm init,一路回车下一步,会在你的目录下生成一个package.json的文件

npm init

小程序中引入vant_第2张图片
3、去官网找安装的指令,控制台输入安装命令
vant官网:https://youzan.github.io/vant-weapp/#/quickstart

npm i vant-weapp -S --production

4、开发者工具构建npm包
点击开发者工具上面的 工具 再点击 构建npm
小程序中引入vant_第3张图片
来了,这个错误重启开发者工具,重新编译一下就ok了
小程序中引入vant_第4张图片
5、勾选详情里的使用npm
小程序中引入vant_第5张图片
大功告成!
测试一下

  "usingComponents": {
    "van-button": "vant-weapp/button"
  }
<van-button type="default">默认按钮van-button>
<van-button type="primary">主要按钮van-button>
<van-button type="info">信息按钮van-button>
<van-button type="warning">警告按钮van-button>
<van-button type="danger">危险按钮van-button>

效果
小程序中引入vant_第6张图片
bingo~

你可能感兴趣的:(vant的引用,微信小程序)