寫在前面

---

看了Vue之后，發現了Vant這個移動端的組件庫很不錯。然后，就想在小程序引用這個組件。

看了微信小程序的官網介紹可以引用第三方的組件庫。但是，要求微信開發工具的版本必須要在2.2.10 以上的版本才可以

通過 npm 的方式引用Vant 移動端的組件庫。

環境

---

操作系統：win7 旗艦版

微信開發者工具版本：v1.02.1911180

創建小程序

---

首先，我們需要打開微信開發者工作。創建一個新的空的項目。如下圖所示：

然后，新建一個目錄用于存放引用的組件庫。如下圖所示：

初始化npm

---

選中新建文件，鼠標右鍵選擇在終端打開。此刻，會打開一個命令面板。如下圖所示：

然后，在控制面板中輸入 npm init 。如下圖所示：

輸入名字，默認是自己創建的文件夾。如果你命名的文件夾的名字不長度的話。它會有提示：Sorry.name can no longer contain capital letters。

此時，你只需重新輸入一個長一點的名字即可。然后，后面的都默認回車就可以了。如下圖所示：

我們會發現在小程序的文件夾中自動創建了package.json。如圖所示：

安裝Vant依賴包

---

輸入命令npm i vant-weapp -S --production 回車。如下圖所示：

在小程序的項目中，創建了node_modules包。

構建npm

---

我們回到微信小程序的開發者工具中。選擇右上角 工具-> 構建npm。如下圖所示：

構建成功后，會在文件夾多一個miniprogram_npm文件夾。如下圖所示：

最后，需要在詳情中勾選使用npm模塊的選項。如圖所示：

至此，已經完成了對vant組件的引用。

使用組件庫

---

首先，我們需要在json文件夾中，引用組件。如下圖所示：

然后，在wxml頁面引用。如下圖所示：

最后，成功引用組件。如下圖示：

總結

以上是生活随笔為你收集整理的微信小程序如何使用Vant的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。