在微信小程序中如何使用vant UI ,最近在開發小程序項目的時候遇到了這個問題, 去網上百度發現你們給的步驟廣泛都是直接npm i vant-weapp -S --production,接着構建npm, 然而,我在嘗試的時候發現,構建npm的時候一直失敗,告訴我找不到node_moudules ????node
大家是否是也遇到了這種問題呢? 好的,接下來就讓我來告訴你們真正的解決方案吧!npm
首先, 你須要在小程序根目錄下打開命令窗口, 依次 輸入如下命令 json
npm init 初始化
npm install --production
npm i vant-weapp -S --production
第二步以前,你須要保證你的微信開發者工具版本比較新,不然沒有是構建npm工具的小程序
第二步就是,打開微信開發者工具,電擊左上方 工具,找到 構建npm微信小程序
構建完成,會生成 miniprogram_npm 文件夾微信
最後, 就是須要在頁面中使用 vant 組件了,打開剛剛生成的 miniprogram_npm 文件夾 下面的 vant-weapp ,裏面的就是vant 的全部組件配置文件,例如,button,微信開發
當在一個頁面中調用vant的組件時，須要在對應的頁面json中添加以下配置：app
代碼爲:工具
"usingComponents": { "van-button": "/miniprogram_npm/vant-weapp/button/index", //引入button組件 "van-rate":"/miniprogram_npm/vant-weapp/rate/index" //引入rate組件 }
在對應的wxml中加入組件標籤就能夠了spa
<van-button type="default">默認按鈕</van-button> <van-rate v-model="value" />
千萬不要忘記在JS中聲明對應的變量!!!
以上就是在小程序中使用vant組件的詳細步驟了,但願對你有所幫助哦!