微信小程序引入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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
javascript Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
javascript 函数调用的对象和方法
Jul 01 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
JavaScript字符串String和Array操作的有趣方法
Dec 18 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
vue-cli webpack配置文件分析
May 20 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
flash用php连接数据库的代码
2011/04/21 PHP
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
jQuery实现开关灯效果
2020/08/02 jQuery
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
Python3 能振兴 Python的原因分析
2014/11/28 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
python分布式环境下的限流器的示例
2017/10/26 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
详解python多线程之间的同步(一)
2019/04/03 Python
Python Web版语音合成实例详解
2019/07/16 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
数据库测试通常都包括哪些方面
2015/11/30 面试题
静态变量和实例变量的区别
2015/07/07 面试题
金融专业个人求职信
2013/09/22 职场文书
求职简历推荐信范文
2013/12/02 职场文书
关于运动会的稿件
2014/02/02 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
保护环境倡议书500字
2014/05/19 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
毕业实习单位意见
2015/06/04 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
七年级作文之游记
2019/12/11 职场文书
python 网络编程要点总结
2021/06/18 Python
 Python 中 logging 模块使用详情
2022/03/03 Python
代码复现python目标检测yolo3详解预测
2022/05/06 Python