1如何引入组件库

  有两种方法 1 npm下载 2 下载代码,下面介绍第二种方法。

  在gitHub上, 链接如下 https://github.com/youzan/vant-weapp 首先在自己项目目录static下新建一个vant文件夹,用于存放组件文件,把dist文件夹下的所有文件拷贝到static下面的vant目录下,如下所示:

2 如何使用

  1 在需要使用组件的页面所在的文件夹下新建一个页面main.json, (新建页面后必须npm run dev 才能生效)在其中引入相应的组件即可,如下图所示引入了van-popup组件和van-picker组件:

  2 在对应的页面中使用, 这个页面使用了van-popup组件和van-picker组件。在弹层中选择年份。

  3 注意事项

  popup的事件命名中使用了减号, 直接使用会导致组件不生效,解决方法如下: 找到vant目录下popup目录下的index.js文件(就是上面所说的在static下面新建的vant),修改其中的事件名,如下注释部分,把短横线命名改为驼峰命名,即可生效。

3 到这里就可以在页面中使用了相应的组件了。

在mpvue框架中使用Vant WeappUI组件库的注意事项的更多相关文章

  1. 小程序使用mpvue框架无缝接入Vant Weapp组件库

    有美团开源出的mpvue以其vue的语法和良好的开发效率再搭配上用户体验良好的UI组件无疑是定制化微信小程序的开发方式,然而由于mpvue是对微信原生开发的再次封装,这也为我们引入UI组件添加了不少麻 ...

  2. django-drf框架中排序和查询组件

    0910自我总结 django-drf框架中排序和查询组件 一查询相关 1.模糊查询 1.导入模块组件 from rest_framework.filters import SearchFilter ...

  3. Vant UI 组件库如何做rem适配?

    Vant是一款移动端基于vue的组件库,V2.1.1版本非常棒.文档地址:https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/intro,那么V ...

  4. 5-1 Vant | 移动组件库

    Vant 什么是Vant Vant是一个轻量,可靠的移动端组件库,2017开源 目前 Vant 官方提供了 Vue 2 版本.Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付 ...

  5. 微信小程序没找到构建npm或者没找到node_modules目录以及如何在小程序中引入vant weapp组件

    微信小程序没找到构建npm或者没找到node_modules目录解决方法如下: 按照微信小程序提供的文档npm install是不行的,直接提示没找到可构建的npm包. 1.直接安装:npm init ...

  6. 把项目中的vant UI组件升级

    首先把之前 的VANT 卸载掉 npm uninstall vant 然后重新安装 一次vant npm i vant -S

  7. vue使用饿了么element-ui框架中的上传组件进度条无法使用,:on-progress钩子无法触发的原因

    自己写的例子都是好好的,调试了半天,在项目里怎么都出不来 最终终于找到原因: 在上传文件时要做进度显示需要用到xhr.upload.onprogress事件,此时如果你的项目里用到mock.js模拟数 ...

  8. 微信小程序mpvue项目使用WuxWeapp前端UI组件

    前言:这是一篇简单粗暴的使用指南 在最近的小程序项目里前端UI框架最后选择使用WuxWeapp,这篇文章记录一下如何在小程序mpvue项目中使用该UI组件. 步骤一:下载源码 (地址在这里)主要是里面 ...

  9. 微信小程序引入Vant组件库

    前期准备 Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.j ...

随机推荐

  1. python网络爬虫之使用scrapy爬取图片

    在前面的章节中都介绍了scrapy如何爬取网页数据,今天介绍下如何爬取图片. 下载图片需要用到ImagesPipeline这个类,首先介绍下工作流程: 1 首先需要在一个爬虫中,获取到图片的url并存 ...

  2. 代码空间项目 -- cookie的基本使用

    cookie在日常开发b/s架构时候经常使用,可以在记住用户,方便自动登录,也可以记住用户的偏好并对应推送广告 下面说说开发时候的基本用法: 1.创建cookie//设置cookie,键值对形式Coo ...

  3.  (转)windows一台电脑添加多个git账号

    版权声明:技术总结来自互联网,书籍,以及工作积累.如果觉得我的总结有帮助,欢迎分享. https://blog.csdn.net/qq1332479771/article/details/701496 ...

  4. 坡道定点停车30cm

    坡道定点停车与起步是科目二五项必考之一,想要顺利通过该项考试,学员需要掌握两个要点,一个是车身距离右侧边线30cm以内的距离,一个是定点时机.本期,元贝小编先和大家分享半坡起步右边30公分怎么看.   ...

  5. ping返回 dup

    大概原因如下: 目的主机不可达,也就是 跟主机不在一个网段,也没有路由跳转 一般是远端交换机或HUB流量超过负载,即堵塞 应该是你的网络中存在环路路由,也就是到达你ping的主机有一条以上的路由路径, ...

  6. BestCoder3 1001 Task schedule(hdu 4907) 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4907 题目意思:给出工作表上的 n 个任务,第 i 个任务需要 ti 这么长的时间(持续时间是ti ~ ...

  7. suishou

    sageException: Write operations are not allowed in read-only mode (FlushMode.NEVER/MANUAL): Turn you ...

  8. MySQL丨分页查询

    直奔主题 一.sql语句:select * from table limit startPageNum,everyPageNum 1)语句解析: table:你要查询的表 startPageNum:从 ...

  9. Tensorboard 的简单使用

    确保环境以及安装好tensorflow以及tensorboard 下面通过一个简单的例子来显示一下使用方式,一个向量加法的图结构. import tensorflow as tf a = tf.con ...

  10. pycharm常用快捷键和自定义快捷键

     默认快捷键 编辑类: Ctrl + Space 基本的代码完成(类.方法.属性)Ctrl + Alt + Space 类名完成Ctrl + Shift + Enter 语句完成Ctrl + P 参数 ...