小程序wepy框架引入vant.UI

最新推荐文章于 2023-07-17 19:18:02 发布

拿这个考验干部

最新推荐文章于 2023-07-17 19:18:02 发布

阅读量450

点赞数

分类专栏： vant 文章标签：小程序

本文链接：https://blog.csdn.net/m0_52948787/article/details/118421116

版权

vant 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何在微信小程序项目中集成Vant Weapp UI框架。首先通过npm命令安装 vant-weapp，并将dist文件夹复制到src/components目录下并重命名为van。然后在使用Vant组件的页面配置usingComponents，例如van-button。最后，展示了如何在模板中使用van-button的不同样式，如默认、主要、警告和危险按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序wepy框架引入vant.UI

在项目根目录npm i vant-weapp -S --production安装vant

下载安装完成后去

node_modules/_vant_weapp
复制
dist文件夹到
src/components中
替换名称为van

在这里插入图片描述

在要使用vant的页面的config中配置usingComponents

config = {
    navigationBarTitleText: "",
    usingComponents: {
      "van-button": "../components/van/button/index",
    },
  };

在这里插入图片描述
完成,开始使用

<template>
  <view class="mass-to-user-box">
    <van-button type="default">默认按钮</van-button>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
  </view>
</template>