微信小程序引入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 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
在JavaScript中正确引用bind方法的应用
May 11 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
实例解析jQuery中proxy()函数的用法
May 24 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
微信小程序 冒泡事件原理解析
Sep 27 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边学边教》(01.开篇――准备工作)
2006/12/13 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
PHP编写RESTful接口
2016/02/23 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
Python标准库与第三方库详解
2014/07/22 Python
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
安全教育感言
2014/03/04 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
保洁员岗位职责
2015/02/04 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
运动会新闻报道稿
2015/07/22 职场文书
redis cluster支持pipeline的实现思路
2021/06/23 Redis
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers