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

写在前面：

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

注意：

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

Vantwapp官网

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

第二步：通过npm安装Vant

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

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

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

1. 在项目根目录中新建wxcomponent文件夹
2. 将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>

来源地址：https://blog.csdn.net/m0_63853448/article/details/127662594