微信小程序中使用vant组件

最新推荐文章于 2025-07-10 17:12:17 发布

shine refuel

最新推荐文章于 2025-07-10 17:12:17 发布

阅读量612

点赞数 2

CC 4.0 BY-SA版权

文章标签：微信小程序 node.js

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/Lsukai/article/details/120470469

第一步：创建微信小程序项目（注意：如右图，此时跟目录结构中没有pack.json文件）

在这里插入图片描述

第二步：在文件根目录下使用npm init （如右图，这一步是为了初始化出pack.json，如果已经有了pack.json那就直接执行第三步！)

在这里插入图片描述

第三步：微信小程序打开项目-点击终端，终端中输入：npm i @vant/weapp -S --production（安装完成后可以看到pack.json中的"dependencies"对象中多出： “@vant/weapp”: "^1.8.7"依赖包，目录结构中同样多出node_modeles，如右图）

在这里插入图片描述

在这里插入图片描述

第四步：开发者工具右上角点击详情，选择本地设置，勾选使用npm模块

在这里插入图片描述

然后选择构建npm，等待构建完成

在这里插入图片描述

此时根目录中出现图中文件夹

在这里插入图片描述

到这里就安装完成了，然后在想要使用组件之前，在对应的json文件中注册组件如下图

在这里插入图片描述

然后就可以在页面中使用啦啦啦啦啦！！！！！

在这里插入图片描述

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。