HBuilder X（uniapp）微信小程序vue3项目引入vant

又是踩了一堆坑，看了文档问了gpt一顿操作，学会的如何在引入HBuilder X（uniapp）微信小程序vue3项目中引入vant ，本篇非常简单！！没有废话！！

目录

一、 安装Vant组件库

二、创建wxcomponents目录

三、在pages.json中注册并引入组件 

四、引入Vant样式 

五、使用

---

Vant Weapp官方网站： 

Vant Weapp - 轻量、可靠的小程序 UI 组件库

一、 安装Vant组件库

@vant/weapp 是 Vant 专门为微信小程序定制的组件库，而 vant 是针对 Vue 2 和 Vue 3 开发的 PC 和移动端的组件库。

npm i @vant/weapp -S --production

 安好可以在package.json检查一下：

二、创建wxcomponents目录

1、在项目的根路径下创建wxcomponents目录

2、 将node_modules中@vant文件夹下的dist复制到wxcomponents，并修改文件夹名为vant。

三、在pages.json中注册并引入组件 

将usingComponents配置到globalStyle下！这样全局页面都可以使用Vant组件。

比如引入按钮组件：

"usingComponents": {
  "van-button": "/wxcomponents/vant/button/index"
}

位置如下： 

四、引入Vant样式 

 在App.vue中引入Vant的公共组件样式

@import "/wxcomponents/vant/common/index.wxss";

位置如下： 

 

五、使用

<van-button type="primary">主要按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

效果如下：