微信小程序导入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/[email protected]@vant-weapp/action-sheet/index.wxml

../wxs/utils.wxs not found from ./miniprogram_npm/[email protected]@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，之后替换掉项目中的文件）之后保存即可解决