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>