溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

如何在微信小程序中引入VANT組件

發(fā)布時(shí)間：2021-05-10 16:27:57 來(lái)源：億速云 閱讀：251 作者：Leah 欄目：web開(kāi)發(fā)

今天就跟大家聊聊有關(guān)如何在微信小程序中引入VANT組件，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

1.右鍵項(xiàng)目名稱(chēng)->在終端中打開(kāi)

如何在微信小程序中引入VANT組件

2.在終端輸入 npm init 用來(lái)初始化，然后一直回車(chē)默認(rèn)就Ok。

之后項(xiàng)目中會(huì)出現(xiàn) project.config.json

如何在微信小程序中引入VANT組件

內(nèi)容為當(dāng)前項(xiàng)目的配置信息以及依賴(lài)包的管理。

3.安裝vant依賴(lài)包(在終端輸入)

npm i vant-weapp -S --production

如何在微信小程序中引入VANT組件

4.進(jìn)入小程序開(kāi)發(fā)工具，選擇左上角 工具->構(gòu)建npm

如何在微信小程序中引入VANT組件

完成之后項(xiàng)目里會(huì)多出依賴(lài)包

如何在微信小程序中引入VANT組件

5.點(diǎn)擊右上角詳情并勾選使用npm模塊。

如何在微信小程序中引入VANT組件

6.選擇要在哪個(gè)pages里使用該組件

這里以pages下的movie舉例，寫(xiě)一個(gè)簡(jiǎn)單的按鈕。

如圖 在對(duì)應(yīng)的json文件中引入vant的button

如何在微信小程序中引入VANT組件

7.在對(duì)應(yīng)wxml文件，寫(xiě)如下代碼：

<van-button type="default">默認(rèn)按鈕</van-button>
<van-button type="danger">主要按鈕</van-button>

如何在微信小程序中引入VANT組件

效果圖如下：

如何在微信小程序中引入VANT組件

看完上述內(nèi)容，你們對(duì)如何在微信小程序中引入VANT組件有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手