微信小程序導入Vant報錯

作者：如也_d1c0
鏈接：https://www.jianshu.com/p/0d2332984f8c
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。

 

先放出來Vant UI 的官方文檔 https://youzan.github.io/vant-weapp/#/changelog

第一種

最簡單的方法,直接下載Vant UI 或者是git clone https://github.com/youzan/vant-weapp.git
git倉庫的網址:https://github.com/youzan/vant-weapp
下載完成之后找到dist文件夾放到微信小程序根目錄下按需引入即可
路徑設置:

"usingComponents": { "van-button": "/path/to/vant-weapp/dist/button/index" } 

里面的"/path/to/vant-weapp/dist"的路徑根據實際的路徑修改

第二種

npm安裝

// 在微信小程序根目錄下初始化文檔 npm init // 安裝Vant包 npm i vant-weapp -S --production 

微信小程序基本配置中勾選npm配置

 

微信小程序一設置.png

構建npm

 

微信小程序-構建npm.png

然后按照文檔按需導入即可

路徑設置:

"usingComponents": { "van-button": "/path/to/vant-weapp/dist/button/index" } 

里面的"/path/to/vant-weapp/dist"的路徑根據實際的路徑修改

錯誤踩坑

如果出現這種錯誤

VM6419:5 ./miniprogram_npm/_vant-weapp@0.5.12@vant-weapp/action-sheet/index.wxml ../wxs/utils.wxs not found from ./miniprogram_npm/_vant-weapp@0.5.12@vant-weapp/action-sheet/index.wxml > 1 | <wxs src="../wxs/utils.wxs" module="utils" /> | ^ 2 | 3 | <van-popup 4 | show="{{ show }}" 

解決方法:你只需要把構建出來的miniprogram_npm/vant-weapp文件夾里的內容都刪除，之后再https://github.com/youzan/vant-weapp下載一份Vant UI，將dist文件夾中的文件復制到 miniprogram_npm/vant-weapp（即下載一份Vant，之后替換掉項目中的文件）之后保存即可解決