微信小程序使用vant组件库

官方文档

https://vant-contrib.gitee.io/vant-weapp/#/quickstart#bu-zou-san-xiu-gai-project.config.json

安装

使用npm包管理器安装vant/weapp组件包。

npm i @vant/weapp -S --production

安装完成后vant/weapp代码会下载到npm_moudules目录下。

修改 app.json

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

构建npm小程序包

选择菜单 > 工具 > 构建npm，开发者工具将会把node_modules下的包构建到小程序的 “miniprogram_npm”下，这样开发者工具就能够识别vant/weapp组件包了。

使用

引入组件

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

"usingComponents": {

"van-button": "@vant/weapp/button/index"

}

然后在模板文件中使用就可以了

<van-button type="primary">按钮</van-button>

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