小程序npm引入vant-weapp的坑

作者: 无枉少年 | 来源:发表于2019-07-29 15:09 被阅读4次

微信小程序项目使用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://blog.csdn.net/qq_38845493/article/details/90203454

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

错误2

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

{

  "usingComponents": {

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

      }

}

引入成功

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

相关文章

  • 小程序npm引入vant-weapp的坑

    微信小程序项目使用npm安装vant-weapp的正确步骤 使用npm安装vant-weapp 到项目根目录下: ...

  • 小程序引入vant-Weapp

    小程序引入vant-Weapp 本文不再赘述官网提供的安装步骤紧在安装之时遇见的问题进行梳理此次开发不使用云开发服...

  • 小程序的npm

    npm 小程序可以通过require/export/module 引入npm的包而且支持在小程序的目录上面npm ...

  • 没有找到 node_modules 目录。

    微信小程序,在用npm i vant-weapp -S --production命令快速安装有赞的包时,提示没有找...

  • 小程序npm引入包

    import 后,报错 module "cos-wx-sdk-v5" is not defined 解决办法 代码结构

  • Snap.svg入坑大法

    首坑 在react中使用,需要先npm install snapsvg将其引入,其次需要引入npm install...

  • 18.微信小程序使用npm包步骤

    这里以npm引入小程序官方拓展组件库recycle-view为例 【特别重要】1.在小程序根目录内,初始化npm(...

  • Mac微信小程序引入Vant Weapp

    在小程序的根目录执行npm init -y生成package.json文件 引入Vant Weapp,在小程序的根...

  • 小程序 快速引入vant-weapp组件库

    要点: 步骤: 在一个空文件夹,快速构建一个小程序 在该文件夹 地址栏→输入 cmd →回车 npm init -...

  • 小程序中使用 npm

    引入 Vant Weapp 为例: 通过 npm 安装 1. 在小程序目录下运行命令行 npm init -y 初...

网友评论

    本文标题:小程序npm引入vant-weapp的坑

    本文链接:https://www.haomeiwen.com/subject/dfybrctx.html