微信小程序使用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压缩混淆工具
May 16 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
js使下拉列表框可编辑不止是选择
Dec 12 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
深入理解JavaScript编程中的同步与异步机制
Jun 24 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
javascript实现拖放效果
Dec 16 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 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脚本加密专家php解密算法
2020/09/13 PHP
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
PHP中strtotime函数使用方法分享
2012/01/10 PHP
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
Python读写Excel文件的实例
2013/11/01 Python
Python中的闭包总结
2014/09/18 Python
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
大学生求职简历的自我评价范文
2013/10/12 职场文书
《社戏》教学反思
2014/04/15 职场文书
小学教师读书活动总结
2014/07/08 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
新手初学Java网络编程
2021/07/07 Java/Android
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS