微信小程序怎么引入vant

首先在你小程序的目录下打开终端
然后初始化一个package.json文件
输入:npm init 或者 npm install cnpm都一样
然后一路回车
看小程序项目就回产生一个package.json文件:
微信小程序怎么引入vant_第1张图片
接着在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)