【微信小程序遇到的坑】 使用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）