首先在你小程序的目录下打开终端
然后初始化一个package.json文件
输入:npm init 或者 npm install cnpm都一样
然后一路回车
看小程序项目就回产生一个package.json文件:

接着在vant组件库的官网上找到安装语句:npm i vant-weapp -S --production,在终端输入安装命令(还是那个终端)
这是基于小程序的vant库官网:
https://youzan.github.io/vant-weapp/#/intro
构建npm:在微信开发者工具的菜单栏中找到工具栏的选项“构建npm”,等待构建完成
其中miniprogram_npm下就是vant-weapp组件库;
最后,在微信开发者工具的详情里面将“使用npm模块"勾选上
引用和使用vant组件:(关于如何引用和使用组件可以参考官方文档,很全)
来个列子 button
在app.json或index.json中引入组件
“usingComponents”: {
“van-button”: “@vant/weapp/button/index”
}
然后复制代码即可使用
注:如果直接这样使用不了的话有可能是小程序没有解析@
可以使用下面这个引入,其余方法都一样了
{
"usingComponents": {
"van-button":"vant-weapp//button",
}
}
本文详细介绍了如何在微信小程序中集成Vant Weapp组件库的过程,包括初始化package.json,通过npm安装Vant Weapp,配置微信开发者工具以使用npm模块,以及如何在app.json中正确引用和使用Vant组件。
944

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



