微信小程序使用Vant Weapp组件库的方法

微信小程序使用Vant Weapp组件库的方法步骤

地址：https://youzan.github.io/vant/#/zh-CN/intro

一.引入Vant组件库

（注：在最外层文件，或者可以直接在项目文件夹 shift+鼠标右键 在此处启动命令窗口或者PowerShell窗口）

1.首先运行 npm init (注：然后回车就可以了，到最后is this OK？（yes）敲 y 等待就完成了)

完成以后会在目录显示这个文件

二. 安装对应的vant-weapp组件库包

继续输入命令：npm i vant-weapp -S --production 导入vant-weapp包

安装完成后保证当前你的微信开发者工具是最新版本，然后点击执行“构建npm“

构建成功后会提示：

同时项目根目录中会多出一个目录“miniprogram_npm”，这个就是小程序可以识别的npm第三方库。（如果未出现可以等一会，或者关掉微信开发者工具重新启动）

三. 调用vant组件

这时候当我们需要在一个页面中调用vant组件，那么就要在对应的页面json中添加类似如下配置：

（注：一定注意是在"usingComponents"对象中 引入）

这里示例的是一个button组件

{
  "usingComponents": {
    "van-button": "/miniprogram_npm/vant-weapp/button/index"
  }
}

接着你就可以在wxml中直接调用这个ui组件了。

完成这一步，就说明你已经引入成功了
文章参考与：https://blog.csdn.net/weixin_43953710/article/details/90905318?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task