微信小程序导入Vant报错

墨蓝 2021-11-26 08:22 638阅读 0赞

作者：如也\_d1c0   
链接：https://www.jianshu.com/p/0d2332984f8c  
来源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

**先放出来Vant UI 的官方文档** [https://youzan.github.io/vant-weapp/\#/changelog][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][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配置 ####

![Image 1][]

微信小程序一设置.png

#### 构建npm ####

![Image 1][]

微信小程序-构建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][https_github.com_youzan_vant-weapp]下载一份Vant UI，将dist文件夹中的文件复制到 miniprogram\_npm/vant-weapp（即下载一份Vant，之后替换掉项目中的文件）之后保存即可解决

转载于:https://www.cnblogs.com/ning123/p/11149106.html

[https_youzan.github.io_vant-weapp_changelog]: https://links.jianshu.com/go?to=https%3A%2F%2Fyouzan.github.io%2Fvant-weapp%2F%23%2Fchangelog
[https_github.com_youzan_vant-weapp]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fyouzan%2Fvant-weapp
[Image 1]: