微信小程序添加Vant Weapp组件库

微信小程序添加Vant Weapp组件库

首先右键小程序代码中的miniprogram文件夹---->在终端中打开

输入：npm init

之后一直回车选择默认就行

在miniprogram文件夹中自动生成了package.json文件

之后同样在终端执行：npm i @vant/weapp -S --production

回到小程序开发工具----->菜单‘工具’----->‘构建npm’

构建后会发现在miniprogram文件夹下会有个miniprogram_npm文件夹，里面存放vant组件库

在开发工具最右边----->详情------->本地设置------->勾选‘使用npm模块’

之后就可以开始使用vant组件库了

例：

引入button组件库，可以参考官网：https://youzan.github.io/vant-weapp/#/intro

找到相应的组件库说明；

首先：

引入
在需要使用的页面中的 .json文件里添加：

"usingComponents": {
  "van-button": "@vant/weapp/button"
}

之后再 .wxml中添加：

主要按钮
搞定