微信小程序導入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，以後替換掉項目中的文件）以後保存便可解決