分享好友 编程语言首页 频道列表

微信小程序npm引入vant-weapp库的方法

小程序文章/教程  2023-02-09 09:560

1、终端打开小程序所在目录

微信小程序npm引入vant-weapp库的方法

 

 2、npm init初始化，初始化完成之后，小程序项目中就会出现package.json文件，说明已经初始化成功

微信小程序npm引入vant-weapp库的方法

 

3、npm install --production 安装生产环境，不要npm install都给装上，以免小程序包过大

微信小程序npm引入vant-weapp库的方法

 

 4、安装vant ：npm i vant-weapp -S --production

微信小程序npm引入vant-weapp库的方法

 

 5、微信开发者工具勾选 npm 构建

a、工具 》构建npm

b、详情》使用npm模块

6、最后会形成一个带有avnt-weapp的工程

微信小程序npm引入vant-weapp库的方法

 

 6、导致这一步基本会报错

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 }}"

解决办法：

删除vant-weapp里的所有文件夹

微信小程序npm引入vant-weapp库的方法

 

 然后去github上 https://github.com/youzan/vant-weapp 下载一份Vant UI，将dist文件夹中的文件复制到 miniprogram_npm/vant-weapp（即下载一份Vant，之后替换掉项目中的文件）之后保存即可解决。

7、哪个页面需要使用对应的组件，哪个页面的json文件里再引入组件即可即可

 

查看更多关于【小程序文章/教程】的文章

展开全文
相关推荐
反对 0
举报 0
评论 0
图文资讯
热门推荐
优选好物
更多热点专题
更多推荐文章
小程序 AI/AR 能力
一、关于 VisionKit1、定义VisionKit 为小程序提供了开发 AR 功能的能力，包含了 AR 在内的视觉算法。2、版本提供了 V1 和 V2 两个版本，区别如下：V1平面接口，适用于用户在平面场景下，例如桌面，地面，泛平面场景，放置虚拟物体，不提供真实世界距离。用户

0评论2023-03-08842

Python小程序——快排算法 快排 python
1 def Partition(list,p,q): 2 #这里是用来分块的算法。 3 x = list[p] 4 i = p 5 for j in range(p+1,q+1): #注意range是顾前不顾后的，所以后面的区间值要大一位 6 if list[j]x: 7 i+=1 8 list[i],list[j] = list[j],list[i] 9 10 list[p], list[i] = list[

0评论2023-02-09351

c++第一个小程序 第一个小程序是什么
 #include iostreamusing namespace std;int main(){const int SIZE=50;//定义大小。char name[SIZE]; cout"please input you name!\n"; //提示cinname;//输入cout"hello world:"nameendl; //输出return 0;}   #include iostreamusing namespace std;int m

0评论2023-02-09579

微信小程序 错误记录
1、报错this.getUserInfo(this.setData) is not a function;at pages/index/index onShow function;at api request success callback functionTypeError: this.getUserInfo is not a function在回调结果里调用这个页面的函数 this.fun() 或者 this.setData 时

0评论2023-02-09477

【小程序】添加tabBar后navigateTo失效
某页面.js//事件处理函数bindViewTap() {wx.navigateTo({url: '../logs/logs',})}, app.json"tabBar": {"backgroundColor": "black","color":"white","list": [{"pagePath": "pages/index/inde

0评论2023-02-09474

小程序组件之间的通信 小程序子父子组件通信
前言：其实之前就想写这个的，因为我觉得这么模块化的框架，组件之间通信是非常重要的，也是最经常用到的一块儿，只是之前在项目里一直没用到跨组件通信，现在用到了，也会用了，就一起写出来得了 :） 一、父、子组件之间的通信注：首先我们先将子组件在父组

0评论2023-02-09452

微信小程序左右滑动切换页面示例代码--转载
微信小程序——左右滑动切换页面事件微信小程序的左右滑动触屏事件，主要有三个事件：touchstart，touchmove，touchend。这三个事件最重要的属性是pageX和pageY，表示X，Y坐标。touchstart在触摸开始时触发事件;touchend在触摸结束时触发事件;touchmove触摸的

0评论2023-02-09564

让vue用于小程序setData方法
setData:function(obj){let that = this;let keys = [];let val,data;Object.keys(obj).forEach(function(key){keys = key.split('.');val = obj[key];data = that.$data;keys.forEach(function(key2,index){if(index+1 == keys.length){that.$set(data,key2,

0评论2023-02-09891

微信小程序 canvas导出图片模糊
//保存到手机相册save:function () {wx.canvasToTempFilePath({x: 0,y: 0,width: 375, //导出图片的宽height: 680, //导出图片的高destWidth: 375 * 750 / wx.getSystemInfoSync().windowWidth, //绘制canvas的时候用的是px， 这里换算成rpx ，导出后非常清晰

0评论2023-02-09339

微信小程序hidden问题 微信小程序隐藏view
    context.fillText('Hello World', 20, 380);                wx.drawCanvas({                    canvasId: '2',                    actions: context.getActions()                });       

0评论2023-02-09905

小程序***滑动的表格 小程序实现左右滑动
// pages/test/test.jsPage({/** * 页面的初始数据 */data: {headerList: [{name: '表头一',number: 'A201',type: "标准间"}, {name: '表头二',number: 'A202',type: "大床"}, {name: '表头三',number: 'A203',t

0评论2023-02-09530

微信小程序实现图片双滑缩放大小 微信小程序图片点击放大
在做小程序开发的过程中，后端传来一张图片地图，需要实现双手指滑动，使图片缩放，最终得出了一下代码：  js ：Page({data: {touch: {distance: 0,scale: 1,baseWidth: null,baseHeight: null,scaleWidth: null,scaleHeight: null}},touchStartHandle(e) {/

0评论2023-02-09697

更多推荐