微信小程式如何使用Vant

2022-06-24 14:42:11 字數 1417 閱讀 2555

看了vue之後,發現了vant這個移動端的元件庫很不錯。然後,就想在小程式引用這個元件。

通過npm的方式引用vant移動端的元件庫。

作業系統:win7 旗艦版

然後,新建乙個目錄用於存放引用的元件庫。如下圖所示:

選中新建檔案,滑鼠右鍵選擇在終端開啟。此刻,會開啟乙個命令面板。如下圖所示:

然後,在控制面板中輸入npm init。如下圖所示:

此時,你只需重新輸入乙個長一點的名字即可。然後,後面的都預設回車就可以了。如下圖所示:

我們會發現在小程式的資料夾中自動建立了package.json。如圖所示:

在小程式的專案中,建立了node_modules包。

構建成功後,會在資料夾多乙個miniprogram_npm資料夾。如下圖所示:

最後,需要在詳情中勾選使用npm模組的選項。如圖所示:

至此,已經完成了對vant元件的引用。

首先,我們需要在json資料夾中,引用元件。如下圖所示:

然後,在wxml頁面引用。如下圖所示:

最後,成功引用元件。如下圖示:

在微信小程式中使用vant

你們是不是也遇到了這種問題呢?好的,接下來就讓我來告訴大家真正的解決方案吧 首先,你需要在小程式根目錄下開啟命令視窗,依次 輸入以下命令 構建完成,會生成 miniprogram npm 資料夾 當在乙個頁面中呼叫vant的元件時,需要在對應的頁面json中新增如下配置 為 usingcompone...

微信小程式引入Vant框架

2.在命令視窗中鍵入npm init。然後所有配置都按預設配置進行,只需點選回車鍵即可。3.在命令視窗中鍵入npm install進行構建,成功之後會在根目錄下生成package.json 和 package lock.json 檔案 4 修改 project.config.json 6.最後我們要...

微信小程式 如何使用globalData

globaldata 1 由於它具有共享屬性,對於它的設定和修改,需要分兩方面來說明。globaldata globaldata onload function globaldata onload function 然後,我們來看怎麼獲取globaldata index.js page index....