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"}
使用测试：
默认按钮主要按钮信息按钮警告按钮危险按钮

在这里插入图片描述

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/361a88a468.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐