微信小程序使用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实现勾选复选框触发事件给input赋值
Feb 01 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
js实现简单数字变动效果
Nov 06 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 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邮件管理器源码
2016/01/06 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
python实现ftp客户端示例分享
2014/02/17 Python
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
有关Python的22个编程技巧
2018/08/29 Python
python得到单词模式的示例
2018/10/15 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
毕业学生推荐信
2013/12/01 职场文书
借款民事起诉状范文
2015/05/19 职场文书
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers