微信小程序中引用vant组件库

步骤

1、vant组件库里面也有说明，它说package.json 和 node_modulles 必须在miniprogram目录下，可是一般你刚新建一个小程序项目的时候，是没有package.json文件的，所以你要初始化一下，方法如下

• 打开你新建的小程序项目的根目录，我这里是minicode，当然你不要看我这里有package.json文件啊，我是后来成功了才有的。
• 在这个根目录用cmd打开，并输入npm init -y，并回车，你的项目中就会有package.json文件了
  
  

2、接着还是在小程序项目的根目录输入

npm i @vant/weapp -S --production

这是官方文档给的，可以打开看一下https://youzan.github.io/vant-weapp/#/intro，输入完毕之后你的项目里面就会有node_modulles文件夹了。（还没有结束。。）

3、打开你的微信开发者工具，点击详情，选择本地设置，并勾选使用npm模块

4、点击工具栏，在选择构建npm，此时你的项目的根目录就会出现miniprogram_npm文件夹

5、这下就可挑选你想要的组件了，这里我以引入一个按钮为例子吧。

• 打开官网 https://youzan.github.io/vant-weapp/#/button
• 然后在app.json文件里面配置一下，这样我们就可以全局使用，即每个页面就都可以引用了。配置方法是将如下代码添加到app.json中

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

• 然后复制你在官网上看的button按钮组件代码到你想要的页面中去，如下
  

完结撒花~🎉