前期准备

Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro

1.先在微信开发者工具中打开项目的终端:

然后初始化一个package.json文件:输入命令:npm init

然后一路回车默认的即可:

npm init

项目就回产生一个package.json文件:

{
"name": "miniprogram",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

2.接着在vant组件库的官网上找到安装语句:

npm i vant-weapp -S --production,在终端输入安装命令,点击回车:

npm i vant-weapp -S --production

3.构建npm:

在微信开发者工具的菜单栏中找到工具栏的选项“构建npm”,等待构建完成

4.引用和使用vant组件:

(关于如何引用和使用组件可以参考官方文档噢,很齐全)

以引用button按钮为例,官网文档中都写的特别详细了:

微信小程序引入Vant组件库的更多相关文章

  1. uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤

    uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponen ...

  2. 微信小程序引入ECharts组件

    首先打开ECharts网页 https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8 ...

  3. 微信小程序引入外部组件 iView Weapp

    iview Weapp组件的使用方法: 1. 下载小程序组件库 (前提是你已经有了项目目录) 你可以直接去github把iView Weapp的代码下载下来,也可以用过npm来下载. github地址 ...

  4. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

  5. 微信小程序--页面与组件之间如何进行信息传递和函数调用

    微信小程序--页面与组件之间如何进行信息传递和函数调用 ​ 这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容 页面如何向组件传数据 组件如何向页面传数据 页面如何调用组件内的函数 组件如何调 ...

  6. 原创:WeZRender:微信小程序Canvas增强组件

    WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...

  7. 微信小程序之swiper组件高度自适应

    微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...

  8. 微信小程序基于swiper组件的tab切换

    代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  9. 微信小程序引入md5.js

    今天给大家安利一下微信小程序引入md5.js的方法,不多说 md5.js在下面 直接复制到项目的utils/md5.js即可 /* * A JavaScript implementation of t ...

随机推荐

  1. hdfs、tfs、fastdfs、Tachyon

    hdfs 架构设计 HDFS按照Master和Slave的结构.分NameNode.SecondaryNameNode.DataNode这几个角色. NameNode:是Master节点,是管理者.. ...

  2. 线性DP详解

    顾名思义,线性DP就是在一条线上进行DP,这里举一些典型的例子. LIS问题(最长上升子序列问题) 题目 给定一个长度为N的序列A,求最长的数值单调递增的子序列的长度. 上升子序列B可表示为B={Ak ...

  3. docker(一): 安装

    开始 docker是一个可以帮助开发者使用容器(containers)开发.部署和运行应用程序的平台.llinux下使用容器部署系统称为containerization. container 是映像( ...

  4. 【C语言】了解原码、反码、补码

    原码.反码.补码 在学习C语言的过程中,有遇到补码这个问题,当时感觉懂了,有貌似不是很懂:然后查了一些文档,整理了一番,以后忘记了可以再翻开这篇文档,查漏补缺吧! 原码 原码是指一个二进制数左边加上符 ...

  5. 解决unzip解压中文乱码问题

    使用 unzip XXX.zip 方式解压的时候会出现中文乱码 很多人推荐以下方式: 在windows执行命令,可显示字符集数字一般为936: # chcp // 解压时加上-O cp936,xxx为 ...

  6. Spring MVC前端控制器不拦截静态资源配置

  7. appium实例1:启动淘宝app

      1.在android-sdk里面双击SDK-manager,下载buidl-tools 2.勾选build-tools,随便选一个版本,我这里选的是24的版本 3.下载完成后,在D:\androi ...

  8. Luogu4069 SDOI2016 游戏 树链剖分、李超线段树

    传送门 每一次加的是一个一次函数,一些呈一次函数的线段求最小值,显然用到李超线段树. 然后把维护序列的李超线段树强行上树,就直接套上树剖就可以了. 至于李超树如何区间查询,因为一次函数线段的最小值一定 ...

  9. C# vb .net实现不透明度调整特效滤镜

    在.net中,如何简单快捷地实现Photoshop滤镜组中的不透明度调整呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第 ...

  10. 【转载】C#使用Math.Ceiling方法对计算结果向上取整操作

    在C#的数值运算中,有时候需要对计算结果进行向上取整操作,支持设定结算结果的有效位数,Math.Ceiling方法是C#中专门用来对数值进行向上取整的方法,此方法和Math.Round方法.Math. ...