【微信小程序遇到的坑】 使用npm引入vant组件

从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。

直接创建小程序，从 工具>构建npm，会弹出没有找到node_modules目录，因此以引入vant组件为例。

1，创建普通项目后在右上角详情中，打开使用npm模块。

 

2，鼠标放在目录上右键，打开终端，切换到根目录

3，直接使用npm安装vant组件(使用淘宝镜像安装速度更快)

cnpm i vant-weapp -S --production

4，安装成功后，点开 工具>构建npm

5，完成构建（如果控制台出现报错，再构建一次即可）

此时硬盘中已经存在node_modules目录，只是开发工具默认隐藏了

 

接下来就开始引用vant组件

1，在想要引入组件的 json 文件中配置(在app.json里配置更方便管理)

测试引入vant中的button组件

{
  "usingComponents": {
    "van-button": "/miniprogram_npm/[email protected]@vant-weapp/button/index"
  }
}

在对应的wxml文件中，直接引入vant组件代码，保存即可（如果出现报错，检查json中的文件路径是否正确，重新构建一下npm）