微信小程序使用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 相关文章推荐
javascript实现动态CSS换肤技术的脚本
Jun 29 Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
javascript随机之洗牌算法深入分析
Jun 07 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
React中的refs的使用教程
Feb 13 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
javscript 数组扁平化的实现
Feb 03 Javascript
JS数组的常用10种方法详解
May 08 Javascript
用vue设计一个日历表
Dec 03 Vue.js
微信小程序中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/04/18 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
python基础教程之Hello World!
2014/08/29 Python
深入解析Python中的WSGI接口
2015/05/11 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
公司门卫工作职责
2014/06/28 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python
MySQL创建管理子分区
2022/04/13 MySQL