1、首先初始化并安裝，記住按照這個順序來，不要錯了

npm init  //一路回車
npm install --production
npm i @vant/weapp -S --production

使用cmd后輸入npm init 出現(xiàn)的界面一路回車就行

image.png

2、在小程序的本地設(shè)置勾選使用npm

image.png

3、 在小程序工具--構(gòu)建npm

image.png

4、構(gòu)建成功后會出現(xiàn)miniprogram_npm文件夾

image.png

5、引用vant組件

//在對應(yīng)頁面的json
"usingComponents": {
    "van-icon": "@vant/weapp/icon/index",
    "van-search": "@vant/weapp/search/index"
 }
<van-search shape="round" custom-class="search-box" background="none" readonly="{{ true }}" placeholder="請輸入產(chǎn)品或門店" bindtap="jumpSearch" />

5.1、在app.css中引用vant內(nèi)置樣式css,按照官網(wǎng)的“@import '@vant/weapp/common/index.wxss';”路徑報錯找不到，修改為如下路徑

@import '/miniprogram_npm/@vant/weapp/common/index.wxss';

5.2： 將 app.json 中的 "style": "v2" 去除，小程序的新版基礎(chǔ)組件強行加上了許多樣式，難以去除，不關(guān)閉將造成部分組件樣式混亂。

6、成功
————————————————
版權(quán)聲明：本文為CSDN博主「余溫?zé)o痕」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/u014678583/article/details/106971149/