这里给大家讲解小程序中如何引入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. sqlserver 将店铺表转换成可以用in查询的字符串

    create TABLE #tempshopt ( shopid varchar(max) ) set @aSql = 'insert into #tempshopt(shopid) select s ...

  2. QDomDocument::clear()的调用，会导致关闭程序时崩溃!!!

    //读一份xml前,先清理m_Doc[QDomDocument] bool XmlIO::xmlRead(QString &errmsg) { m_mutex.lock(); // m_Doc ...

  3. PHP FILTER_SANITIZE_NUMBER_INT 过滤器

    定义和用法 FILTER_SANITIZE_NUMBER_INT 过滤器删除数字中所有非法的字符. 该过滤器允许所有数字以及 . + - Name: "number_int" ID ...

  4. 【dart学习】-- Dart之元数据

    一,概述 元数据概述  元数据(Metadata),又称中介数据.中继数据,为描述数据的数据(data about data),主要是描述数据属性(property)的信息,用来支持如指示存储位置.历 ...

  5. 线段树维护线性基并——17西安icpc a

    #include<bits/stdc++.h> using namespace std; #define N 10005 int a[N],n,k,q; struct LB{ ]; LB( ...

  6. cartographer和ROS的坐标系关系

    参考定义见:backpack_3d.lua    Local map frame是一次slam过程中的原点.但是现在cartographer支持Incremental mapping.global m ...

  7. delphi 数据处理

    TStringStream 怎样转换String procedure TForm1.Button1Click(Sender: TObject); var ss:TStringStream; str:S ...

  8. Linux之-命令

    安装xshell http://jingyan.baidu.com/article/1612d500af1c97e20e1eee25.html 1.帮助命令 man:获得某个命令的说明和使用方式的详细 ...

  9. iOS 几种定时器

    //第一种 每一秒执行一次(重复性) double delayInSeconds = 1.0; timer = dispatch_source_create(DISPATCH_SOURCE_TYPE_ ...

  10. Linux上VNC 启动和关闭

    查询vnc的线程: [admin@cn2-uat-esb-01-0001 ~]$ ps -ef|grep vncadmin 19080 21305 0 10:04 pts/2 00:00:00 gre ...