微信小程序导入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，以后替换掉项目中的文件）以后保存便可解决