在微信小程序中如何使用vant UI ,最近在開(kāi)發(fā)小程序項(xiàng)目的時(shí)候遇到了這個(gè)問(wèn)題, 去網(wǎng)上百度發(fā)現(xiàn)大家給的步驟普遍都是直接npm i vant-weapp -S --production,接著構(gòu)建npm, 然而,我在嘗試的時(shí)候發(fā)現(xiàn),構(gòu)建npm的時(shí)候一直失敗,告訴我找不到node_moudules ????

你們是不是也遇到了這種問(wèn)題呢? 好的,接下來(lái)就讓我來(lái)告訴大家真正的解決方案吧!

首先, 你需要在小程序根目錄下打開(kāi)命令窗口,依次輸入以下命令

npm init  初始化npm install --productionnpm i vant-weapp -S --production

第二步之前,你需要保證你的微信開(kāi)發(fā)者工具版本比較新,否則沒(méi)有是構(gòu)建npm工具的

第二步就是,打開(kāi)微信開(kāi)發(fā)者工具,電擊左上方 工具,找到 構(gòu)建npm

構(gòu)建完成,會(huì)生成miniprogram_npm 文件夾

最后, 就是需要在頁(yè)面中使用 vant 組件了,打開(kāi)剛剛生成的miniprogram_npm 文件夾 下面的 vant-weapp ,里面的就是vant 的所有組件配置文件,例如,button,

當(dāng)在一個(gè)頁(yè)面中調(diào)用vant的組件時(shí)，需要在對(duì)應(yīng)的頁(yè)面json中添加如下配置：

代碼為:

"usingComponents": {   "van-button": "/miniprogram_npm/vant-weapp/button/index",  //引入button組件   "van-rate":"/miniprogram_npm/vant-weapp/rate/index"     //引入rate組件 }

在對(duì)應(yīng)的wxml中加入組件標(biāo)簽就可以了

<van-button type="default">默認(rèn)按鈕</van-button><van-rate v-model="value" />

千萬(wàn)不要忘記在JS中聲明對(duì)應(yīng)的變量!!!

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)錯(cuò)新站長(zhǎng)站的支持。