一:安装vant组件库
查看项目中是否有package.json文件,如果没有,需要初始化包管理文件,方法如下:
在终端中运用以下命令:
npm init -y
二:通过npm安装组件库
初始化包管理文件成功之后就可以安装组件库了,同样在项目终端中运行如下命令:
npm i @vant/weapp -S --production
三:修改app.json
将 app.json 文件中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
四:构建npm
打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。
五:使用Vant组件
示例如下:
//app.json中引入
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
//在.wxml页面上使用,此处以button举例,具体样式参考Vant官方文档
<vant-button type="primary">按钮</vant-button>
这就可以使用了。