微信小程序引入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 相关文章推荐
在线编辑器中换行与内容自动提取
Apr 24 Javascript
日期 时间js控件
May 07 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
js实现异步循环实现代码
Feb 16 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 Javascript
关于vue面试题汇总
Mar 20 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
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
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
QueryPath PHP 中的jQuery
2010/04/11 PHP
php通用防注入程序 推荐
2011/02/26 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
php删除指定目录的方法
2015/04/03 PHP
php邮件发送的两种方式
2020/04/28 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
js比较日期大小的方法
2015/05/12 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
python协程用法实例分析
2015/06/04 Python
Python之reload流程实例代码解析
2018/01/29 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
PyTorch-GPU加速实例
2020/06/23 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
工程项目经理岗位职责
2013/12/15 职场文书
小区门卫值班制度
2014/01/24 职场文书
员工安全承诺书
2014/05/22 职场文书
获奖感言怎么写
2015/07/31 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
golang中的struct操作
2021/11/11 Golang
python turtle绘图
2022/05/04 Python
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript