微信小程序引入vant weapp,button宽度100%

克里斯蒂亚诺更新2026-04-09 8:49

在微信小程序中使用 Vant 4（也就是 Vant Weapp 组件库），最关键的一点是：你实际要安装的是 @vant/weapp，而不是 vant 或 vant@4 -3 -5。vant 是为 Vue 网页项目准备的，在小程序里无法直接运行。

跟着下面这几步，就可以在你的小程序里用上 Vant 组件了。

初始化 npm

在你的小程序项目根目录下，打开终端，运行初始化命令。这会在项目里创建一个 package.json 文件来管理依赖-4 -5 -9。
复制代码
```
npm init -y
```
安装 Vant Weapp

继续在终端中执行以下命令来安装组件库-3 -5 -8。
复制代码
```
npm i @vant/weapp -S --production
```
修改项目配置

这一步非常关键，确保组件能正确构建和显示-4 -6 -9。
- 修改 app.json ：找到并删除 "style": "v2" 这一行。这是为了避免 Vant 的样式与小程序的默认样式发生冲突。
- 修改 project.config.json ：在 setting 字段里，添加或确认有以下配置，这能帮助开发者工具找到 npm 包的正确位置。
  复制代码
```
"setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
        {
            "packageJsonPath": "./package.json",
            "miniprogramNpmDistDir": "./"
        }
    ]
}
```
构建 npm

在微信开发者工具中，点击顶部菜单栏的 工具 -> 构建 npm -5 -6。构建成功后，项目根目录下会出现一个名为 miniprogram_npm 的文件夹，这就表示安装成功了。

配置完成后，就可以像下面这样在页面中使用 Vant 组件了。

在页面的 .json 文件中引入组件

在你想使用组件的页面（比如 index/index.json）里，通过 usingComponents 字段引入。路径 @vant/weapp/button/index 是官方推荐的方式，简洁明了-5 -6。
复制代码
```
{
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }
}
```
在 .wxml 文件中使用

现在，你就可以像使用普通小程序组件一样，在页面中愉快地使用 <van-button> 了-10。
复制代码
```
<van-button type="primary">主要按钮</van-button>
<van-button type="default">默认按钮</van-button>
```

引入：button的宽度是100%：

<van-button type="primary" block bindtap="onSubmit">生成游线</van-button>