2分钟学会小程序中使用vant组件库

如何在小程序中使用vant组件库？

一、npm init 生成package.json 配置文件

二、安装包执行命令

npm i @vant/weapp -S --production

三、修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

将"lazyCodeLoading": "requiredComponents"删除

四、使用npm包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

 

五、使用组件

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。

所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录

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

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger" loading>危险按钮</van-button>
<van-button plain hairline type="info">细边框按钮</van-button>