小程序接入vant Weapp组件的详细步骤

大家好，我是小佑@小佐：https://blog.csdn.net/Smell_rookie，是一名页面仔工程师，我会不定时在CSDN更新我的博客，有兴趣的可以点个关注来逛逛我的主页。
刚创建的项目的文件结构

首先在你项目的根目录下打开终端，输入npm init 对项目初始化

这时会生成pachage.json文件。

继续在终端运行以下命令

我这里用这个：

npm i vant-weapp -S --production

运行完如图所示：

安装成功后 回到小程序开发工具 点击 工具 => 构建npm

运行完截图：

完成后在编辑器右边的详情把红框内的打勾上

使用组件

在你想使用组件库的的json文件内引入组件。比如你想在fundIncome页面内使用button组件。

效果：

上面的代码就参照vant的官网文档了。

注意坑点：

我们先来看以下我们下载的vant weapp的版本：

是0.5.28的老版本了。而官网使用的版本是：

默认1.5.2的文档了。所以当你遇到以下这情况时：

纠正：截图引入组件的路径写错，但这个报错不是引入路径写错的原因，写对了也对报这样的错。

报错：Component is not found in path

可以看到文档写的calendar的组件在构建好的文件中并没有，这种的时候多半就是你的旧版本（0.5.28）没有下新版本（1.5.2）的内容。

解决坑点：

首先删掉构建好的 注意是构建好的文件minprogram_npm下的vant weapp下的所有组件内容：

然后去官网源代码的dist文件下载所有组件文件：

里面展开是这样的：

将下载好的组件文件拷贝到minprogram_npm下的vant weapp文件夹中，我们再来看使用组件的效果：

可以看到不管是构建好的文件里面有calendar组件，使用也不会报错了。