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