微信小程序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之路还在继续。

总结

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

赞 (0)

相关推荐

  • 微信小程序使用npm支持踩坑

    前言 最近写了个CNode 社区的微信小程序版本,把在微信小程序中使用npm包,踩的坑记录一下,希望能给遇到类似问题的小伙伴,提供一些思路和方向. npm 支持 从小程序基础库版本 2.2.1 或以上.及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装第三方包. 踩坑之路 由于项目中需要格式化一些日期数据,于是选择了moment,一款JavaScript 日期处理类库 首先使用命令行,安装moment # 打开小程序根目录 cd src npm install --

  • 微信小程序云开发如何使用npm安装依赖

    微信小程序云开发如何使用npm安装依赖

    微信小程序开发教程描述的相当模糊,以至于我反复品读,多次尝试才悟出来该怎么在云开发中使用 npm 安装依赖. 首先强调一下,云开发中必须安装 wx-server-sdk 依赖, 而wx-server-sdk 依赖需要使用 npm 的.但由于部分开发过程可能不再需要其他的依赖,那么每次开发都要使用 npm 安装依赖是一件很麻烦的事情.微信为了简化云开发操作,提供了一键云端安装 wx-server-sdk 依赖,也就是在云端帮助我们搞定,不需要我们手动在本地使用 npm 安装,如下图: 如果某个自建

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

    微信小程序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 -

  • 详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现

    一.实践踩坑 项目使用mpvue开发 1. scroll-view默认是不滚动的..所以要先设置scroll-x="true"或者scroll-y="true" 2. 在scroll-view里面添加定宽元素,超过scroll-view宽度(设置了100%,即屏幕宽度)后,它竟然换行了.所以要scroll-view的样式要这样设置: scroll-view { width: 100%; white-space: nowrap; // 不让它换行 } 3. 然后在定宽

  • 微信小程序中使用vant框架的具体步骤

    微信小程序中使用vant框架的具体步骤

    目录 1.打开我们小程序的项目目录,然后打开文件所在的位置. 2.初始化项目文件 3.输入初始化项目的命令 4.安装依赖 5.使用组件 1.说到vant框架相信大家应该并不陌生了吧,做过移动端开发的小伙伴们应该都知道它吧. 2.Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源,已持续维护 4 年时间.Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一. 3.我们废话不多说,直接进入今天的主题.我们该如何在微信小程序中去使用vant组件库呢!

  • 微信小程序开发之你可能没有踩过的神坑总结

    目录 getApp() 在页面入口文件顶部定义变量 你不知道的 wx.createSelectorQuery() and wx.createIntersectionObserver(); 总结 getApp() getApp() 函数是用来获取 app 实例的函数,一般情况下没啥问题,但是在几个特殊的场景下它会给你带来意想不到的 bug. 在 app.js 中的 onLaunch 回调函数中使用 // app.js App({ onLaunch() { console.info(getApp()

  • 微信小程序实现搜索框功能及踩过的坑

    先上代码: wxml: <!-- 顶部搜索框 --> <view class="inputcontainer"> <view class="input" catchtap="inputSwitchStatus" wx:if="{{!edit}}">搜索商品</view> <view class="edit" wx:else> <form bi

  • 详解微信小程序轨迹回放实现及遇到的坑

    详解微信小程序轨迹回放实现及遇到的坑

    微信小程序轨迹回放主要使用到polyline进行划线操作,以及使用marker去进行小车移动操作.效果图如下: 具体实现代码: trackplay.wxml文件 <!--pages/tracker/tracker.wxml--> <map id="mymap" longitude="{{mapCenter.longitude}}" latitude="{{mapCenter.latitude}}" scale="{{s

  • Vant Weapp组件踩坑:picker的初始赋值解决

    在使用vant的picker组件时,我希望有在页面加载时向数据库获取值来设置picker的默认值.开始我使用官方文档中的default-index属性,并在onLoad方法中进行this.setData().但是这样做picker的默认索引还是0. 于是我又将setData放入onShow().onReady()方法,均不奏效.(我真的不知道为什么,新建一个空白页面测试也是这样) 继而我查看官方文档,发现picker有实例方法setIndexes(),于是尝试. 然而我在onLoad().onR

  • 在微信小程序中使用vant的方法

    在微信小程序中如何使用vant UI ,最近在开发小程序项目的时候遇到了这个问题, 去网上百度发现大家给的步骤普遍都是直接npm i vant-weapp -S --production,接着构建npm, 然而,我在尝试的时候发现,构建npm的时候一直失败,告诉我找不到node_moudules ???? 你们是不是也遇到了这种问题呢? 好的,接下来就让我来告诉大家真正的解决方案吧! 首先, 你需要在小程序根目录下打开命令窗口,依次输入以下命令 npm init 初始化 npm install

  • 新手快速入门微信小程序组件库 iView Weapp

    新手快速入门微信小程序组件库 iView Weapp

    介绍 iView Weapp提供了与 iView 一致的 UI 和尽可能相同的接口名称,大幅度降低了学习成本,是一套一套高质量的微信小程序 UI 组件库. 使用步骤 1:首先在github上面下载组件库代码 github 2:下载之后解压 可以看到解压的组件文件内容,选择 dist文件,将 dist 目录拷贝到自己的小程序项目中 3:开始写代码 写页面效果,写一个按钮 在json文件里面引入组件 { "usingComponents": { "i-button":

  • 微信小程序里引入SVG矢量图标的方法

    引言 因为微信小程序的限制,引入外部图片或者矢量图,只能通过设置背景图片background-image : url("base64转码后的代码");的方式来进行操作.同时还是因为微信小程序的限制,我们要先把svg的xml编码转码为base64编码 首先,说明以下我们常见的svg矢量图是什么?下面引用百度百科的话: svg是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式 可能还是比较迷糊,那我们来看看,用记事本打开一个svg,里面的编码是什么: <

随机推荐