微信小程序使用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自动判断浏览器分辨率的代码
Jan 28 Javascript
extjs fckeditor集成代码
May 10 Javascript
工作需要写的一个js拖拽组件
Jul 28 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
js操作数组函数实例小结
Dec 10 Javascript
JavaScript操作select元素和option的实例代码
Jan 29 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
angular6的table组件开发的实现示例
Dec 26 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
Aug 28 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 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
python判断windows系统是32位还是64位的方法
2015/05/11 Python
Python自定义线程池实现方法分析
2018/02/07 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
python对日志进行处理的实例代码
2018/10/06 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
联想C++笔试题
2012/06/13 面试题
自考生自我鉴定范文
2013/10/01 职场文书
集团公司人力资源部岗位职责
2014/01/03 职场文书
留学推荐信中文范文三篇
2014/01/25 职场文书
烟台的海导游词
2015/02/02 职场文书
法定代表人身份证明书
2015/06/18 职场文书
spring cloud 配置中心native配置方式
2021/09/25 Java/Android