先放出来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，之后替换掉项目中的文件）之后保存即可解决
