这里给大家讲解小程序中如何引入vant组件(我这里是采用小程序的云开发模板)

1.首先在项目的miniprogram文件夹右键在终端中打开,输入命令npm init初始化生成一个package.json的文件(不想私人定制,一键enter即可生成该文件)

2.进入到有赞vant weapp官网看安装文档,地址:https://youzan.github.io/vant-weapp/#/quickstart

3.使用命令npm i vant-weapp -S --production快速安装vant-weapp下的所有组件

4.此时需要在小程序中的工具菜单下点击构建npm

5.此时项目中就会有一个miniprogram_npm的目录,里面就是所下载的组件文件

6.别忘了,此时还需要点击小程序的详情按钮,勾选使用npm模块才可以使用下载的组件

7.在想使用组件的页面所在目录下的json文件的

"usingComponents": {
"van-button": "vant-weapp/button"
}
8.在wxml中直接使用
<van-button type="danger">危险按钮</van-button>即可
 
 
大功告成~~~

在小程序中引入有赞的vant框架组件的更多相关文章

  1. 在微信小程序中引入 Iconfont 阿里巴巴图标库

    小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法 一.下载图标 首 ...

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

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

  3. 小程序中引入iconfont

    注释:本人喜欢 font class,  你们可以依葫芦画瓢unicode和 symbol,,下面是 font class   演示: 1.选择好图标,然后: font class 2.步骤二: 复制 ...

  4. 小程序中关于获取app实例与当前组件

    1.getApp()来获取 App 实例 2.getCurrentPages()获取前页面栈

  5. 在微信小程序中使用redux

    本文主要讲述,在微信小程序中如何使用redux DEMO 需要解决的问题 如何在小程序中引入redux状态管理库,及它相关的插件? 微信小程序没有清晰的异步api,便于thunkMiddleware处 ...

  6. 去除富文本中的html标签及vue、react、微信小程序中的过滤器

    在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除htm ...

  7. 微信小程序中的自定义组件

    微信小程序中的组件 前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 ...

  8. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  9. JS 条形码插件--JsBarcode 在小程序中使用

    在小程序中的使用: utils文件夹下 barcode.js 粘粘以下代码 var CHAR_TILDE = 126 var CODE_FNC1 = 102 var SET_STARTA = 103 ...

随机推荐

  1. KiCAD层颜色修改

    KiCAD层颜色修改 KiCAD的PCB各层的颜色太过于暗淡,有时可能不适合操作者的习惯,尤其是铜层(布线层),这时候就需要去修改层的颜色,具体操作如下图:选择想要修改的层,双击左边颜色框框,进入之后 ...

  2. C# 关于获取周,月,年时间大全

    DateTime now = DateTime.Now; DayOfWeek dayOfWeek = now.DayOfWeek; : (int)dayOfWeek; //本周第一天(此结果是周一,如 ...

  3. 欧拉路径 && 欧拉回路

  4. Spring Boot 2.0 常见问题总结(一)

    SpringBoot2.x 依赖环境和版本新特性说明 依赖版本 jdk8 以上, Springboot2.x 用 JDK8 , 因为底层是 Spring framework5 . jar 包方式运行 ...

  5. leetcood学习笔记-28-KMP*

    题目: 第一次提交: class Solution: def strStr(self, haystack: str, needle: str) -> int: if not len(needle ...

  6. Fatal error: Call to a member function on a non-object 的2种解决办法

    这两天被一个莫名其妙的错误:Fatal error: Call to a member function on a non-object in d://www/htdocs/inc.php 77  搞 ...

  7. ORACLE动态sql在存储过程中出现表或视图不存在的解决方法

    Oracle动态sql在存储过程中出现表或视图不存在的解决方法 CREATE OR REPLACE PROCEDURE P_test is strsql varchar2(2000); BEGIN   ...

  8. J2EE学习篇之--Spring技术详解

    今天我们来看一下Spring的相关知识,我们知道Spring也是一个开源的框架,这个框架并不像是Struts一样,这个框架是可以用在Java的所有地方,所以,其实开发Android的时候我们也是可以使 ...

  9. AC自动机处理多串匹配——cf1202E

    si+sj中间有一个切割点,我们在t上枚举这个切割点i,即以t[i]作为最后一个字符时求有多少si可以匹配,以t[i+1]作为第一个字符时有多少sj可以匹配 那么对s串正着建一个ac自动机,反着建一个 ...

  10. Hbase表类型的设计

    HBase表类型的设计 1.短宽 这种设计一般适用于: * 有大量的列 * 有很少的行 2.高瘦 这种设计一般适用于: * 有很少的列 * 有大量的行 3.短宽-高瘦的对比 短宽 * 使用列名进行查询 ...