微信小程序怎么引入vant

首先在你小程序的目录下打开终端
然后初始化一个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",
  }
}
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值