微信小程序使用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 相关文章推荐
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
Sep 22 Javascript
JSON取值前判断
Dec 23 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
JavaScript中CreateTextFile函数
Aug 30 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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Linux下Python获取IP地址的代码
2014/11/30 Python
pandas数据清洗,排序,索引设置,数据选取方法
2018/05/18 Python
python3实现逐字输出的方法
2019/01/23 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
一名毕业生的自我鉴定
2013/12/04 职场文书
打架检讨书800字
2014/01/10 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python
解决redis批量删除key值的问题
2022/03/23 Redis
css弧边选项卡的项目实践
2023/05/07 HTML / CSS