微信小程序使用Vant Weapp组件库的方法步骤


Posted in Javascript onAugust 01, 2019

微信小程序使用Vant Weapp组件库的方法步骤

地址:https://youzan.github.io/vant/#/zh-CN/intro

一.引入Vant组件库

1.首先运行 npm init

微信小程序使用Vant Weapp组件库的方法步骤

微信小程序使用Vant Weapp组件库的方法步骤

就会生成 package.json

微信小程序使用Vant Weapp组件库的方法步骤

2.运行

npm i vant-weapp -S --production

 微信小程序使用Vant Weapp组件库的方法步骤

微信小程序使用Vant Weapp组件库的方法步骤 

3.安装成功后 点击 工具 => 构建npm

微信小程序使用Vant Weapp组件库的方法步骤

之后点击 详情 => 使用构建npm 渲染

微信小程序使用Vant Weapp组件库的方法步骤

二.使用组件库

首先在json文件中引入组件

微信小程序使用Vant Weapp组件库的方法步骤

"van-button": "vant-weapp/button"

之后可以在官网找到想要用的组件使用

微信小程序使用Vant Weapp组件库的方法步骤 

微信小程序使用Vant Weapp组件库的方法步骤 

报错码

VM292:1 thirdScriptError sdk uncaught third Error module "miniprogram_npm/vant-weapp/mixins/transition" is not defined Error: module "miniprogram_npm/vant-weapp/mixins/transition" is not defined at require (http://127.0.0.1:56368/appservice/__dev__/WAService.js:22:26700) at http://127.0.0.1:56368/appservice/__dev__/WAService.js:22:26448 at http://127.0.0.1:56368/appservice/miniprogram_npm/vant-weapp/popup/index.js:5:19 at require (http://127.0.0.1:56368/appservice/__dev__/WAService.js:22:26841) at <anonymous>:395:7 at HTMLScriptElement.scriptLoaded (http://127.0.0.1:56368/appservice/appservice?t=1557802464868:4544:21) at HTMLScriptElement.script.onload (http://127.0.0.1:56368/appservice/appservice?t=1557802464868:4556:20) 

解决方法:

你只需要把miniprogram_npm/vant-weapp里的组件文件夹都删除,

之后再https://github.com/youzan/vant-weapp下载一份vant, 将dist文件夹(vant-weapp-dev\vant-weapp-dev\dist)中的文件复制到项目的miniprogram_npm/vant-weapp

即下载一份vant,之后替换掉项目中的文件

之后保存解决

微信小程序使用Vant Weapp组件库的方法步骤

总结

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

Javascript 相关文章推荐
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
js点击更换背景颜色或图片的实例代码
Jun 25 Javascript
jquery 日期控件datepicker属性详细解析
Nov 08 Javascript
js获得当前时区夏令时发生和终止的时间代码
Feb 23 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 #Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 #Javascript
jQuery中DOM常见操作实例小结
Aug 01 #jQuery
JS浮点数运算结果不精确的Bug解决
Aug 01 #Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 #Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 #Javascript
jQuery中DOM操作原则实例分析
Aug 01 #jQuery
You might like
深入探讨PHP中的内存管理问题
2011/08/31 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
javascript 多浏览器 事件大全
2010/03/23 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
python和opencv实现抠图
2018/07/18 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
心理健康心得体会
2014/01/02 职场文书
教师考核评语
2014/04/28 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
员工考勤管理制度
2015/08/06 职场文书