1.在根目錄下創建wxcomponents

2.引入vant weapp

1.我們到https://github.com/youzan/vant-weapp下載最新的壓縮包

2.?解壓，將里面的dist文件夾復制粘貼到wxcomponents目錄下,并改名為vant

3. 在根目錄下App.vue中引入UI樣式index.wxss，如下圖

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

4. 在pages.json頁面將vant的組件注冊到對應的頁面，參考https://youzan.github.io/vant-weapp/#/intro頁面的組件配置方法

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

5. 現在，即可在配置好的頁面使用當前組件

<van-button plain type="primary">樸素按鈕</van-button>

6.?也可以將usingComponents配置到globalStyle下，這樣全局頁面都可以使用

3.在引入過程中可能會遇到的問題

1.組件引入完畢只有運行，可能會出現以下錯誤

1）不要慌，主要原因是icon組件下面的index.wxss文件里面的",url"，‘，’后面沒有空格,即", url",需要添加上空格，即上圖中的兩個位置需要添加空格

2）停止運行,然后再次運行,因為需要重新編譯,然后就成功了

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的关于uniapp引入Vant Weapp第三方组件，遇到的问题和解决方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。