微信小程序配置Vant Weapp

一：安装vant组件库

        查看项目中是否有package.json文件，如果没有，需要初始化包管理文件，方法如下：

在终端中运用以下命令：

npm init -y

二：通过npm安装组件库

        初始化包管理文件成功之后就可以安装组件库了，同样在项目终端中运行如下命令：

npm i @vant/weapp -S --production

三：修改app.json

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

四：构建npm

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

五：使用Vant组件

示例如下：

//app.json中引入
"usingComponents": {
          "van-button": "@vant/weapp/button/index"
}


//在.wxml页面上使用,此处以button举例，具体样式参考Vant官方文档
<vant-button type="primary">按钮</vant-button>

这就可以使用了。