詳解如何在微信小程序開(kāi)發(fā)中正確的使用vant ui組件
微信小程序終于可以支持npm導(dǎo)入第三方庫(kù)了（https://developers.weixin.qq....），但是這種導(dǎo)入模式和使用模式有別于我們使用的npm調(diào)用。今天我按照有贊新出的vant小程序ui庫(kù)來(lái)講解如何導(dǎo)入npm資源。
第一步：
在小程序工程的根目錄下執(zhí)行：
npm i vant-weapp -S --production
第二步：
保證當(dāng)前你的微信開(kāi)發(fā)者工具是最新版本，然后點(diǎn)擊執(zhí)行“構(gòu)建npm“
構(gòu)建成功后會(huì)提示：
同時(shí)項(xiàng)目根目錄中會(huì)多出一個(gè)目錄“miniprogram_npm”，這個(gè)就是小程序可以識(shí)別的npm第三方庫(kù)。
第三步：
這時(shí)候當(dāng)我們需要在一個(gè)頁(yè)面中調(diào)用vant組件，那么就要在對(duì)應(yīng)的頁(yè)面json中添加類似如下配置：
{
"usingComponents":{
"van-button":"/miniprogram_npm/vant-weapp/button/index"
}
}
接著你就可以在wxml中直接調(diào)用這個(gè)ui組件了。
注意，對(duì)于vant庫(kù)來(lái)說(shuō)其實(shí)你并不需要在頁(yè)面對(duì)應(yīng)的js中require vant-weapp組件。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
uniapp使用H5調(diào)試時(shí)跨域問(wèn)題解決
本文主要介紹了uniapp使用H5調(diào)試時(shí)跨域問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了javascript隨機(jī)之洗牌算法深入分析,同時(shí)提供了一個(gè)完整實(shí)例,需要的朋友可以參考下2014-06-06
今天小編就為大家分享一篇關(guān)于js中實(shí)例與對(duì)象的區(qū)別講解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
Bootstrap實(shí)現(xiàn)各種進(jìn)度條樣式詳解
本篇文章主要介紹了Bootstrap實(shí)現(xiàn)各種進(jìn)度條樣式詳解 ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
最近需要用到預(yù)加載和延遲加載的東東，就參考寫了一個(gè)。支持跨頁(yè)面，支持超時(shí)設(shè)置與依賴設(shè)置。2010-05-05
本文主要介紹了canvas繪制環(huán)形進(jìn)度條的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
解決WebStorm?2022.3.x?無(wú)法識(shí)別?Element?UI?2.15.11?新版本中的?el-
這篇文章主要介紹了解決?WebStorm?2022.3.x?無(wú)法識(shí)別?Element?UI?2.15.11?新版本中的?el-xxx?標(biāo)簽問(wèn)題,本文給大家分享兩種解決方案，需要的朋友可以參考下2023-01-01
回車直接實(shí)現(xiàn)點(diǎn)擊某按鈕的效果即觸發(fā)單擊事件
這篇文章主要介紹了回車直接實(shí)現(xiàn)點(diǎn)擊某按鈕的效果即觸發(fā)單擊事件,需要的朋友可以參考下2014-02-02
JS Thunk 函數(shù)的含義和用法實(shí)例總結(jié)
這篇文章主要介紹了JS Thunk 函數(shù)的含義和用法,結(jié)合實(shí)例形式總結(jié)分析了JS Thunk 函數(shù)的具體含義、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
JS ES6中setTimeout函數(shù)的執(zhí)行上下文示例
這篇文章主要給大家介紹了關(guān)于JS ES6中setTimeout函數(shù)的執(zhí)行上下文的相關(guān)資料，文中給出了詳細(xì)的介紹和示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面來(lái)一起看看吧。2017-04-04