報錯提示

報錯顯示

官方引入寫法

官方的推薦

解決

1.在 main.js里面把css改為less

image.png

2.在app.vue里面加入

@import 'vant/lib/index.css';

這樣就可以解決這個問題了

完了之后現在又要寫小程序，運行到[微信小程序]后，報錯

app.js

原因是微信小程序不支持document，window對象，所以navigator自然是無法使用的。
所以，并不建議uniapp項目使用vant來寫小程序。

如果非要用vant寫，也可以

1.輸入npm init -y 指令，創建項目配置文件（即package.json）
2.輸入npm i @vant/weapp -S --production下載vant
3.在項目的根路徑下，創建wxcomponents目錄，并將依賴項（node_modules）中@vant文件夾下的dist復制到wxcomponents，并修改文件夾名為vant;
4.在pages.json中注冊并引入組件

image.png

也可以將usingComponents放在全局中，變成全局變量

image.png