微信小程序使用Vant Weapp組件庫的方法步驟
地址:https://youzan.github.io/vant/#/zh-CN/intro
一.引入Vant組件庫
(注:在最外層文件源梭,或者可以直接在項(xiàng)目文件夾 shift+鼠標(biāo)右鍵 在此處啟動(dòng)命令窗口或者PowerShell窗口)
1.首先運(yùn)行 npm init
(注:然后回車就可以了路呜,到最后is this OK?(yes)敲 y 等待就完成了)
完成以后會(huì)在目錄顯示這個(gè)文件
二. 安裝對應(yīng)的vant-weapp組件庫包
繼續(xù)輸入命令:npm i vant-weapp -S --production 導(dǎo)入vant-weapp包
安裝完成后保證當(dāng)前你的微信開發(fā)者工具是最新版本,然后點(diǎn)擊執(zhí)行“構(gòu)建npm“
構(gòu)建成功后會(huì)提示:
同時(shí)項(xiàng)目根目錄中會(huì)多出一個(gè)目錄“miniprogram_npm”,這個(gè)就是小程序可以識(shí)別的npm第三方庫。(如果未出現(xiàn)可以等一會(huì),或者關(guān)掉微信開發(fā)者工具重新啟動(dòng))
三. 調(diào)用vant組件
這時(shí)候當(dāng)我們需要在一個(gè)頁面中調(diào)用vant組件耕突,那么就要在對應(yīng)的頁面json中添加類似如下配置:
(注:一定注意是在"usingComponents"對象中 引入)
這里示例的是一個(gè)button組件
{
"usingComponents": {
"van-button": "/miniprogram_npm/vant-weapp/button/index"
}
}
接著你就可以在wxml中直接調(diào)用這個(gè)ui組件了。
完成這一步评架,就說明你已經(jīng)引入成功了
文章參考與:https://blog.csdn.net/weixin_43953710/article/details/90905318?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task