微信小程序导入有赞UI踩坑

先放出来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 | 
    | ^
  2 | 
  3 | 

解决方法:你只需要把构建出来的miniprogram_npm/vant-weapp文件夹里的内容都删除，之后再https://github.com/youzan/vant-weapp下载一份Vant UI，将dist文件夹中的文件复制到 miniprogram_npm/vant-weapp（即下载一份Vant，之后替换掉项目中的文件）之后保存即可解决