如何在微信小程序项目中使用vant组件库

前置环境:首先确保你的电脑当中已安装node环境并且npm没有问题，如果没有可看另一篇博文前半部分安装node教程:node教程

1，创建一个普通的微信小程序项目

2，打开项目终端新建终端

3，输入 npm init -y 初始化包

4，通过 npm 安装 vant, 在终端继续输入: npm i @vant/weapp -S --production 回车

5，修改 app.json 把app.json当中的”style“:v2删除掉

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

6，修改 project.config.json,如图增加对应文件当中packNpmRelationList的配置内容

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为'./'即可

7，点击工具点击构建npm

点击构建npm

出现完成构建则代表已经构建成功

---

以上步骤完成后则代表vant所需环境已经引入完成，接下来进行导入测试

8，首先创建一个新的页面，这里我创建一个名为test的页面

9，在页面的json文件中进行按钮组件的配置

10，在页面的wxml文件中进行按钮代码的引入，如此则大功告成！如需引入其他组件可参考vant官方api进行开发，其他组件的引入也是如此！

api地址: Vant Weapp -API开发文档

可以看到按钮的样式已经展示到了模拟器当中

11，如果未出现以上效果则可先进行缓存清除然后重新构建npm后看效果。