uni-app—vscode—微信小程序使用vant（图文）

1、创建文件夹

src下创建wxcomponents文件夹
wxcomponents文件夹下再创建vant文件夹

2、下载

在https://github.com/youzan/vant-weapp下载最新zip
下载完成后解压，将解压后的文件中的dist文件夹放入刚刚创建好的vant文件夹下

3、在App.vue中引入样式

@import "/wxcomponents/vant/dist/common/index.wxss"

4、在pages.json文件中引入组件

"usingComponents": {
  "van-button": "/wxcomponents/vant/dist/button/index"
}

如图我在index也就是首页引入了button组件

5、重新运行

npm run dev:mp-weixin

如果不重新运行，使用vant组件会报错

6、使用

我在第四步的首页（index）页面引入button组件
因此我在该页面使用button组件

<van-button type="warning">警告按钮</van-button>