微信小程序如何引用vant组件

1、首先我们需要安装node.js，我们进入它的官网下载：https://nodejs.org/zh-cn/download/。我们下载长期稳定版，windows用户按照自己操作系统的位数来选择下载安装包。mac直接下载64位安装包，跟大家平时下载安装软件一样下一步下一步。安装完了可以打开各自系统的命令行终端输入node -v 来查看安装是否成功，如果出现版本好就是成功了。

2、微信官方下载微信小程序开发工具。想必大家都下载好了吧，这我就不多说了。我们现在进入小程序的项目中，如图打开小程序的项目路径的终端。

3、在终端输入：npm init

（这部是初始化，启动了微信云开发的一定要输入，接来就一直按回车即可）

4、紧接着在终端继续输入：npm i @vant/weapp -S --production

（此步骤是安装vant）

5、然后进入小程序开发工具，菜单栏中的点击工具->构建npm

6、在小程序右边的详情按钮中的本地设置勾选使用npm模块。

7、在小程序的页面中我需要使用vant中的button按钮组件，那我需要在页面的json文件中引用可复制代码：

"usingComponents": {

"van-button": "@vant/weapp/button/index"

}

如图

8、在wxml文件中即可使用<vant-button>，如图