1. 程式人生 > 程式設計 >微信小程式接入vant Weapp元件的詳細步驟

微信小程式接入vant Weapp元件的詳細步驟

剛建立的專案的檔案結構

在這裡插入圖片描述

首先在你專案的根目錄下開啟終端,輸入npm init 對專案初始化

在這裡插入圖片描述

這時會生成pachage.json檔案。

在這裡插入圖片描述

繼續在終端執行以下命令

在這裡插入圖片描述

我這裡用這個:

npm i vant-weapp -S --production

執行完如圖所示:

在這裡插入圖片描述

安裝成功後 回到小程式開發工具 點選 工具 => 構建npm

在這裡插入圖片描述

執行完截圖:

在這裡插入圖片描述

完成後在編輯器右邊的詳情把紅框內的打勾上

在這裡插入圖片描述

使用元件

在你想使用元件庫的的json檔案內引入元件。比如你想在fundIncome頁面內使用button元件。

在這裡插入圖片描述

效果:

在這裡插入圖片描述

上面的程式碼就參照vant的官網文件了。

到此這篇關於微信小程式接入vant Weapp元件的詳細步驟的文章就介紹到這了,更多相關小程式vant Weapp元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!