小程序模板:专业的小程序模板与静态模板分享平台
小程序
教程
搜索
当前位置 : 首页> 小程序教程> uniapp微信小程序引入vant组件库

uniapp微信小程序引入vant组件库

1. 全局引入(推荐)

在 pages.json 的 globalStyle 中注册组件,所有页面均可使用:

{
  "globalStyle": {
    "usingComponents": {
      "van-button": "/wxcomponents/@vant/weapp/button/index",
      "van-loading": "/wxcomponents/@vant/weapp/loading/index"
    }
  }
}

2. 局部引入

若仅特定页面使用,可在对应页面的 pages.json 配置中单独注册:

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "usingComponents": {
          "van-notify": "/wxcomponents/@vant/weapp/notify/index"
        }
      }
    }
  ]
}

样式文件引入

在 App.vue 中全局引入 Vant 的基础样式

使用组件

  1. 模板语法转换
    Vant 组件基于微信小程序原生语法编写,需注意以下转换:

    • 事件绑定:bind:click → @click

    • 数据绑定:value="{{ data }}" → :value="data"






联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了