Vant是有赞前端团队开源的移动端组件库,一个轻量级且美观的UI组件库;
Vant2网址: Vant 2版本、Vant 3版本
- 微信小程序开发者工具内 / cmd 打开命令行
输入初始化项目命令:npm init
输入命令回车后根据需要填写一些内容,不填就一路回车,然后你会发现项目多了以下两个JSON文件
- 继续初始化
npm install
- 使用npm安装vant-weapp:
npm i @vant/weapp -S --production
- 微信开发工具栏——工具——构建npm
- 点击构建npm会弹出提示框,点确定
构建完目录中多处一个miniprogram_npm文件夹
- 小程序新版基础组件强加了很多样式,难以覆盖,所以在app.json中去掉 “style”:“v2”
- 接下来就可以按需引用了,在app.json / 页面.json 中注册:
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
- wxml文件中使用组件:
<van-button plain type="primary">van按钮</van-button>