微信小程序引入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 相关文章推荐
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 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
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
Python切片用法实例教程
2014/09/08 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
python ansible服务及剧本编写
2017/12/29 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
行政助理的职责
2013/11/14 职场文书
毕业生简单求职信
2013/11/19 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers
OpenCV-Python实现轮廓的特征值
2021/06/09 Python