微信小程序中引入vant 组件
1、在小程序根目录下,在上面的路径显示框中输入cmd,打开命令窗口,(或者按住shift键,再单击鼠标右键,就会有一个“在此处打开命令窗口”)。输入npm init ,初始化项目。
2、继续输入 npm i @vant/weapp -S --production,通过npm 安装组件库。
3、在微信开发者工具菜单栏,点击 ,工具 => 构建npm 。此时,项目中就已经安装完成了vant。有一个miniprogram_npm的文件夹。
4、在小程序的app.json里面全局引入vant组件(官网地址:https://youzan.github.io/vant-weapp/#/quickstart
)。button组件为例:
"usingComponents": {
"van-button": "miniprogram_npm/@vant/weapp/button/index"
},
image.png
5、完成以上步骤,就可以在任意wxml中使用button按钮了。
<van-button round type="info">信息按钮</van-button>
ps:文章内容是综合网上的文章以及自己实践后的记录,如有侵权之处请联系删除。