微信小程序npm引入vant-weapp的踩坑记录

 更新时间:2019年08月01日 16:40:53   作者:无枉少年  
这篇文章主要给大家介绍了关于微信小程序npm引入vant-weapp的踩坑记录,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

微信小程序项目使用npm安装vant-weapp的正确步骤 

使用npm安装vant-weapp 到项目根目录下:

npm i vant-weapp -S --production 

然后再详情中选中使用npm模块,然后点击工具栏中的构建npm。本以为这样就可以安装成功了,结果


没有找到npm包

这让我纠结了一个早上。看了文档,琢磨了很久,最后研究出问题的关键。

第一步:使用cmd进入项目根目录:npm init

然后一直按回车

第二步:输入你要安装的文件(npm i vant-weapp -S --production 

如果已经之前安装了vant-weapp的,就直接到工具栏中选中构建npm就可以了,如果没有就安装好再选中构建npm。

我以为这样就可以使用vant-weapp框架了,然后刷新项目,问题来了。。。

错误1


大概意思-找不到组件

明明步骤都对了,却还是出错。然后就网上找找问题。网上说:

解决方法:
你只需要把miniprogram_npm/vant-weapp里的组件文件夹都删除,
之后再https://github.com/youzan/vant-weapp下载一份vant, 将dist文件夹(vant-weapp-dev\vant-weapp-dev\dist)中的文件复制到项目的miniprogram_npm/vant-weapp
原文:https://www.jb51.net/article/166771.htm

还有就是重新安装vant-weapp。重新安装是可以的,不会报错。

错误2

引入页面的的.json一定要写对,不然也会报错。

{
 "usingComponents": {
 "van-button": "vant-weapp/button" //添加这个
  }
}

引入成功

emmmmm,问题不断,战火不熄,BUG之路还在继续。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。

相关文章

  • js实现可以点击收缩或张开的悬浮窗

    js实现可以点击收缩或张开的悬浮窗

    这篇文章主要介绍了js实现可以点击收缩或张开的悬浮窗效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 微信小程序自定义弹窗实现详解(可通用)

    微信小程序自定义弹窗实现详解(可通用)

    这篇文章主要介绍了微信小程序自定义弹窗实现详解(可通用),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • JavaScript中实现页面跳转的几种常用方法总结

    JavaScript中实现页面跳转的几种常用方法总结

    本文主要介绍了网页开发中页面跳转的概念和重要性,及使用JS实现页面跳转的几种常见方法,包括使用window.location.href,window.location.replace(),window.location.assign(),window.open(),form表单提交以及HTML的a标签等方法实现页面跳转,需要的朋友可以参考下
    2024-10-10
  • JS解析XML文件和XML字符串详解

    JS解析XML文件和XML字符串详解

    这篇文章主要介绍了JS解析XML文件和XML字符串详解,推荐给大家,有需要的小伙伴可以参考下。
    2015-04-04
  • 使用BootStrap实现用户登录界面UI

    使用BootStrap实现用户登录界面UI

    本文给大家介绍使用BootStrap实现用户登录界面UI,布局风格采用左右各一半的风格设计,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-08-08
  • Varlet组件实现一个丝滑的点击水波效果详解

    Varlet组件实现一个丝滑的点击水波效果详解

    这篇文章主要为大家介绍了Varlet组件实现一个丝滑的点击水波效果示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • Javascript条件判断使用小技巧总结

    Javascript条件判断使用小技巧总结

    我们已经知道,null 没有任何的属性值,并且无法获取其实体(existence)值。所以 null.property 返回的是错误(error)而不是 undefined 。
    2008-09-09
  • 原生JS封装拖动验证滑块的实现代码示例

    原生JS封装拖动验证滑块的实现代码示例

    这篇文章主要介绍了原生JS封装拖动验证滑块的实现代码示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • js判断子窗体是否关闭的方法

    js判断子窗体是否关闭的方法

    这篇文章主要介绍了js判断子窗体是否关闭的方法,涉及javascript针对子窗体的获取与属性判定技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • JavaScript队列数据结构详解

    JavaScript队列数据结构详解

    这篇文章主要介绍了JavaScript队列数据结构详解,队列是一种先进先出的数据结构,队列中允许两种基础操作,也就是插入和删除,也就是入队和出队
    2022-07-07

最新评论