微信小程序引入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 Dialog 弹出层对话框插件
Aug 09 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
Jquery实现的角色左右选择特效
May 21 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
BootStrap响应式导航条实例介绍
May 06 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
浅谈Vue数据响应思路之数组
Nov 06 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
WordPress中is_singular()函数简介
2015/02/05 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
Python super()函数使用及多重继承
2020/05/06 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
python speech模块的使用方法
2020/09/09 Python
python调用百度API实现人脸识别
2020/11/17 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
EJB的激活机制
2013/10/25 面试题
如何现实servlet的单线程模式
2014/08/05 面试题
生产经理的自我评价分享
2013/11/07 职场文书
电子商务网站的创业计划书
2014/01/05 职场文书
班队活动设计方案
2014/01/30 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
企业党员一句话承诺
2014/05/30 职场文书
建设工地安全标语
2014/06/07 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
python字典的元素访问实例详解
2021/07/21 Python
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang