微信小程序使用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 相关文章推荐
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
创建公共调用 jQuery Ajax 带返回值
Aug 01 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
JS实现轮播图效果
Jan 11 Javascript
Javascript类型判断相关例题及解析
Aug 26 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/09 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
移动端图片上传旋转、压缩问题的方法
2018/10/16 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
Python 中的 else详解
2016/04/23 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
养殖项目策划书范文
2014/01/13 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
合伙购房协议样本
2014/10/06 职场文书
党员评议思想汇报
2014/10/08 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS