HBuilder X（uniapp）微信小程序vue3项目引入vant_uniapp 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\";

位置如下： 

五、使用

主要按钮默认按钮警告按钮危险按钮

效果如下：