Uniapp中引入Vant(完美避坑版)-Toy模板网

这篇具有很好参考价值的文章主要介绍了Uniapp中引入Vant(完美避坑版)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

写在前面：

今天在做一个uniapp小程序项目，想使用以下vant组件库，
但是在引入过程出现了各种各样的报错，在网上搜索了很多解决方案
都不行，最后通过新建文件夹的方式解决了，分享一下解决方案

注意：

微信小程序中使用的是**Vantwapp**而不是**Vant**

Vantwapp官网

第一步：在Hbuilder中新建uniapp项目（以vue2x项目为例）

Uniapp中引入Vant(完美避坑版)

第二步：通过npm安装Vant

右键项目根目录，选择“在外部资源管理器打开”
点击目录栏，输入cmd,进入控制台
输入npm i @vant/weapp -S --production进行安装
安装成功后页面会新增node_modules文件夹和package-lock.json文件

第三步：新建wxcomponent文件夹（重要！！！）

这一步最重要，文件夹名需为wxcomponent才可以（玄学，我也没研究明白）

在项目根目录中新建wxcomponent文件夹
将node_modules中的dist文件夹复制并粘贴至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>