小程序Vant组件库的使用

一、小程序安装weapp-vant

首先终端进入你的小程序目录文件夹：

然后输入npm init -y：

接着输入命令npm i @vant/weapp -S --production安装 weap-vant：

然后修改 app.json：

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

接着修改 project.config.json：

"packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "../jtminiprogram/"
      }
    ]

接着构建 npm 包：

勾选 使用 npm 模块 选项：

二、小程序使用weapp-vant

完成安装之后，我们可以在小程序json配置文件 中引入组件：

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

然后页面中：

<van-button type="primary">默认按钮</van-button>

查看效果：

可以看到已经成功引入了weapp-vant的组件了。
更多用法可以查看官方文档。

在学习的小程序的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。