如何在微信小程序开发中正确的使用vant ui组件

布满荆棘的人生 2022-12-25 08:52 200阅读 0赞

![c40915dae94387d11ca1d233cf56c0d3.png][]

微信小程序终于可以支持npm导入第三方库了（https://developers.weixin.qq…），但是这种导入模式和使用模式有别于我们使用的npm调用。今天我按照有赞新出的vant小程序ui库来讲解如何导入npm资源。

**第一步：**

在小程序工程的根目录下执行：

npm i vant-weapp -S --production

**第二步：**

保证当前你的微信开发者工具是最新版本，然后点击执行“构建npm“

![20180912230952\_76073.png][20180912230952_76073.png]

构建成功后会提示：

![20180912230949\_96978.png][20180912230949_96978.png]

同时项目根目录中会多出一个目录“miniprogram\_npm”，这个就是小程序可以识别的npm第三方库。

![20180912230907\_21498.png][20180912230907_21498.png]

**第三步：**

这时候当我们需要在一个页面中调用vant组件，那么就要在对应的页面json中添加类似如下配置：

![20180912230905\_91838.png][20180912230905_91838.png]

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

接着你就可以在wxml中直接调用这个ui组件了。

![20180912230903\_52769.png][20180912230903_52769.png]

[c40915dae94387d11ca1d233cf56c0d3.png]: /images/20221120/7d1adcf81bb248b883ed11b23acacaef.png
[20180912230952_76073.png]: https://img-blog.csdnimg.cn/img_convert/998ba1841adf391163f555336b18a430.png
[20180912230949_96978.png]: https://img-blog.csdnimg.cn/img_convert/b655a2113aafea3359e33ef58ec18583.png
[20180912230907_21498.png]: https://img-blog.csdnimg.cn/img_convert/39d3cbea016ea7c81a983edd8d29131e.png
[20180912230905_91838.png]: https://img-blog.csdnimg.cn/img_convert/d05867089c4bb51bcd76dc4496ebf095.png
[20180912230903_52769.png]: https://img-blog.csdnimg.cn/img_convert/3a3ea72aa36efe815418154413b509e8.png