寫在前面：
今天在做一個uniapp小程序項目，想使用以下vant組件庫，
但是在引入過程出現(xiàn)了各種各樣的報錯，在網(wǎng)上搜索了很多解決方案
都不行，最后通過新建文件夾的方式解決了，分享一下解決方案
注意：
微信小程序中使用的是**Vantwapp**而不是**Vant**
Vantwapp官網(wǎng)
第一步：在Hbuilder中新建uniapp項目（以vue2x項目為例）
第二步：通過npm安裝Vant
- 右鍵項目根目錄，選擇“在外部資源管理器打開”
- 點擊目錄欄，輸入cmd,進入控制臺
- 輸入
npm i @vant/weapp -S --production進行安裝
- 安裝成功后頁面會新增
node_modules文件夾和package-lock.json文件
第三步：新建wxcomponent文件夾（重要！！?。?/h5>
這一步最重要，文件夾名需為wxcomponent才可以（玄學(xué)，我也沒研究明白）文章來源：http://www.zghlxwxcb.cn/news/detail-503188.html
- 在項目根目錄中新建
wxcomponent文件夾 - 將
node_modules中的dist文件夾復(fù)制并粘貼至wxcomponent文件夾中
第四步：在App.vue中引入樣式文件
@import "/wxcomponents/dist/common/index.wxss";
第五步：在pages.json中按需引入組件
"usingComponents": {
//按需引入組件(以button為例)
"van-button": "wxcomponents/dist/button/index"
}
使用測試：
<van-button type="default">默認按鈕</van-button>
<van-button type="primary">主要按鈕</van-button>
<van-button type="info">信息按鈕</van-button>
<van-button type="warning">警告按鈕</van-button>
<van-button type="danger">危險按鈕</van-button>
文章來源地址http://www.zghlxwxcb.cn/news/detail-503188.html
到了這里，關(guān)于Uniapp中引入Vant(完美避坑版)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
