微信小程序使用vant UI组件库

东晋谨慎的冬瓜

1305人浏览 · 2025-07-10 17:12:17

东晋谨慎的冬瓜 · 2025-07-10 17:12:17 发布

1. Vant Weapp简介

Vant Weapp是有赞前端团队开源的一套微信小程序UI组件库，提供了一系列高质量、美观的组件，帮助开发者快速构建小程序界面。它包含了按钮、表单、弹窗、导航等常用组件，能够满足大部分小程序开发需求。

2. 安装Node.js环境

Node.js官网下载地址：https://nodejs.org/en/download，这里不详细介绍安装过程，很简单，按照安装提示，傻瓜式一直点击下一步就行。安装完成之后，cmd 输入 node -v ，如果能看到版本号，就说明正确安装成功，如下图所示：

在这里插入图片描述

3. Vant Weapp官网地址

官网地址：https://vant-ui.github.io/vant-weapp/#/home
小白快速上手：https://vant-ui.github.io/vant-weapp/#/quickstart

4. 安装与配置

第一步：首先需要通过npm安装Vant Weapp：

在项目的根目录下执行cmd命令：npm  init

然后再执行命令：npm i @vant/weapp -S --production

第二步：修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

第三步：构建 npm 包

打开微信开发者工具，点击工具 -> 构建 npm，并勾选使用 npm 模块选项，构建完成后，即可引入组件。
在这里插入图片描述

5.使用Vant组件

在单页面xxx.json中配置：

{
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }
}

2.在xxx.wxml中使用组件：

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>