如何在小程序中使用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>