微信小程序引入Vant组件库过程解析


Posted in Javascript onAugust 06, 2019

前期准备

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

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

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

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

npm init

微信小程序引入Vant组件库过程解析

微信小程序引入Vant组件库过程解析

项目就回产生一个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,在终端输入安装命令,点击回车:

微信小程序引入Vant组件库过程解析

npm i vant-weapp -S --production

微信小程序引入Vant组件库过程解析

3.构建npm:

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

微信小程序引入Vant组件库过程解析

4.引用和使用vant组件:

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 给汉字排序实例代码
Jun 28 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 Javascript
js实现移动端轮播图
Dec 21 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 Javascript
Vue数据绑定实例写法
Aug 06 #Javascript
Vue代码整洁之去重方法整理
Aug 06 #Javascript
VUE写一个简单的表格实例
Aug 06 #Javascript
VUE前后端学习tab写法实例
Aug 06 #Javascript
Vue路由前后端设计总结
Aug 06 #Javascript
vue实现行列转换的一种方法
Aug 06 #Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 #Javascript
You might like
php生成html文件方法总结
2014/12/01 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
JS画线(实例代码)
2013/11/20 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
介绍一下Make? 为什么使用make
2016/07/31 面试题
基于Python 函数和方法的区别说明
2021/03/24 Python
质检的岗位职责
2013/11/17 职场文书
党校学习思想汇报
2014/01/06 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
爬山的活动方案
2014/08/16 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript