• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

 

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

 

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

 

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

 

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

a、工具 》构建npm

b、详情》使用npm模块

6、最后会形成一个带有avnt-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里的所有文件夹

 

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

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

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
【小程序】添加tabBar后navigateTo失效发布时间:2022-07-18
下一篇:
小程序组件之间的通信发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap