微信小程序使用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 相关文章推荐
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
Vuex中实现数据状态查询与更改
Nov 08 Javascript
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 Javascript
Vue3.0 手写放大镜效果
Jul 25 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 eval函数一句话木马代码
2015/05/21 PHP
PHP如何使用Memcached
2016/04/05 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
Javascript开发包大全整理
2006/12/22 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
python模块restful使用方法实例
2013/12/10 Python
寻找网站后台地址的python脚本
2014/09/01 Python
Win8下python3.5.1安装教程
2020/07/29 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
青年文明号创建承诺
2014/03/31 职场文书
我的中国梦口号
2014/06/16 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
Python图片验证码降噪和8邻域降噪
2021/08/30 Python
python中的getter与setter你了解吗
2022/03/24 Python
详解SQL报错盲注
2022/07/23 SQL Server