微信小程序使用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 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
vue组件创建的三种方式小结
Feb 03 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 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获取服务器时间的实现代码
2013/06/07 PHP
php截取中文字符串函数实例
2015/02/23 PHP
php遍历目录方法小结
2015/03/10 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python实现的简单dns查询功能示例
2017/05/24 Python
python实现拓扑排序的基本教程
2018/03/11 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
python进行TCP端口扫描的实现
2018/12/21 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
餐厅筹备计划书
2014/04/25 职场文书
毕业评语大全
2014/05/04 职场文书
专家推荐信模板
2014/05/09 职场文书
爱护公共设施标语
2014/06/24 职场文书
环保志愿者活动方案
2014/08/14 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
作风转变年心得体会
2014/10/22 职场文书
2014年销售工作总结
2014/12/01 职场文书
2014年法务工作总结
2014/12/11 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL