微信小程序使用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 相关文章推荐
代码精简的可以实现元素圆角的js函数
Jul 21 Javascript
Prototype Hash对象 学习
Jul 19 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
关于layui flow loading占位图的实现方法
Sep 21 Javascript
前端性能优化建议
Sep 17 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异常处理使用示例
2014/02/25 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
浅谈PHP中的
2016/04/23 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
浅谈sass在vue注意的地方
2017/08/10 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
js实现打字小游戏
2019/12/17 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
关于python2 csv写入空白行的问题
2018/06/22 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
生物技术专业研究生自荐信
2013/09/22 职场文书
素质拓展感言
2014/01/29 职场文书
大学班长竞选稿
2015/11/20 职场文书
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫