报错提示

报错显示

官方引入写法

官方的推荐

解决

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