目录

Vant中的组件类型非常多，而且都设计得简洁优雅，如果在制作微信小程序的时候能用上这个图标库（或者其他组件），会很方便，而且效果也很漂亮。

但是随着微信开发者工具版本不断更新，网上很多教程已经不再适用，因此我写了一个简易的安装后教程，供有需要的人参考。

我只是个大学生，做微信小程序只是学校的作业，刚学写小程序，还不是很熟练，如果有不妥的地方，还请大家指出。

Vant Icon 1 软件版本及安装

本教程仅保证对微信开发者工具以下版本有效；后续版本更新后可能会失效，但仍可作为参考。

1.1 微信开发者工具

我使用的微信开发者工具版本是稳定版（1.06.），不同版本的微信开发者工具页面略有不同，如果你使用的是老版本，可以在网上找其他已有的教程。

为了排查图标库无法正常使用，是否和路径引用有关，我重新安装了微信开发者工具到默认路径（C盘）。装在D盘应该没问题吧？如果想稳妥的话，可以像我一样使用默认安装路径，因为我就是这样安装的，没问题。

安装网址：微信开发者工具下载地址及更新日志 | 微信开放文档()

微信开发者工具下载页面 1.2 Node.js

我使用的Node.js版本是长期支持版本18.16.1（点击页面默认版本直接下载），大家根据自己的电脑配置选择合适的版本即可，应该问题不大。

安装 npm 组件包需要先下载并安装 Node.js，过程中我参考了 B 站的视频《微信小程序组件库 Vant 与 WeUI 零基础入门教程【新视界培训】》（UP 主“新视界培训”）。为了避免后期修改调用路径的麻烦，安装 Node.js 时我使用了默认安装路径（一路点击“下一步”直至安装完成）。

安装网址：下载 | Node.js中文网()

Node.js下载页面 2 npm安装 2.1 npm初始化

用户以管理员身份运行微信开发者工具。打开程序，右键点击下图空白处，选择“在外部终端窗口打开”。Mac用户没有“以管理员身份运行”，但是可以直接打开终端，所以问题不大；只要能打开终端就没问题。

如果没有这个选项，可能是因为你没有以管理员身份运行，而是直接打开了微信开发者工具。这种情况下，请关闭软件，在桌面右键点击微信开发者工具，选择“以管理员身份运行”，再试一次。

选择“在外部终端窗口中打开”

成功后调出控制窗口

输入“npm init -y”初始化npm。

npm init -y

初始化完成后界面显示如下，且文件夹中多了一个“.json”文件。

npm初始化完成 2.2 npm安装

在刚才打开的控制窗口中，按照 Vant 快速入门指南 中的说明，输入“npm i vant- -S --” 即可安装 npm。（后面会不会变我也不清楚，所以为了保险起见，大家可以去 Vant 官网复制一下；不过直接在下面复制应该没问题吧？）

npm i vant-weapp -S --production

Vant官网npm安装

如果显示以下内容，则表示npm安装完成。

npm 安装完成 2.3 构建 npm

在上方菜单栏中选择“- npm”，构建完成后会出现弹窗，同时小程序文件中会多出一个文件夹“”，这就是我们后面使用组件库时需要的文件。

npm 完成3 组件介绍及使用3.1 组件介绍

为了方便全局使用组件库，建议将引用的语句写入app.json文件中。

下面的例子使用了图标库的引用声明，当使用其他组件库时，可以到Vant官网找到他们提供的对应声明，然后修改路径即可。

Vant官网相关内容：

报价由 Vant 提供

需要注意的是，我先是查找了“vant-”文件夹，并按照官方的代码修改了引用路径，但是却报错，因为我们的程序中现在有两个名为“vant-”的文件夹：一个在“”文件夹中，一个在“”文件夹中。我们需要将路径改为“”文件夹中“vant-”文件夹中的路径。如果引用路径设置不正确，就会报错。

图标库引用声明：

"usingComponents": { "van-icon": "/miniprogram_npm/vant-weapp/icon/index" }

图标库正确引用后

对于我这样的初学者来说，需要注意在前面的代码末尾添加逗号（，），否则会编译错误。

3.2 引用组件可能出现的错误

3.1中详细介绍了相应的解决方法，如果遇到下面对应的错误，可以到3.1中寻找解决方法。

3.2.1 地址引用错误报告

[app.json 文件内容错误]app.json: 未找到[""]["van-icon"] (env:

,mp,1.06。； 库：2.19.4）

错误：3.2.2 初学者在组件引入语句前没有在代码末尾添加逗号

[app.json.json 文件错误] app.json：app.json

'EOF','}',':',',',']'，得到

错误：'EOF','}',':',',',']'，3.3 使用组件库

在Vant官网上选择需要的组件，点击右侧对应的图标，对应的内容就会直接复制到剪贴板。然后将语句写入到对应的位置即可。

官网底部有更改图标大小和颜色的说明，这里就不赘述了。

复制Vant官网上调用组件的语句

如果使用过程中出现“渲染层网络层错误”的错误提示，可以删除app.json中的"":"v2",语句。这个语句是决定微信小程序内部组件样式的语句，但是可能和Vant中的组件冲突，导致调用时出错。

如果我不删除 "":"v2 的话，直接编译会报错，删除这句话之后，再次编译就不会报错。但是我成功编译过一次之后，再把这句话加回去，再次编译，就不会报错了。我对这个了解不够，也不知道为什么（可能跟图标库的优先级有关？），所以没法详细解释原理；但是如果大家遇到问题，这个操作应该可以解决问题。

组件库正常使用效果如下：

使用图标库组件在按钮上添加图案