微信小程序引入VANT组件的方法步骤


Posted in Javascript onSeptember 19, 2019

1.右键项目名称->在终端中打开

微信小程序引入VANT组件的方法步骤

2.在终端输入 npm init 用来初始化,然后一直回车默认就Ok。

之后项目中会出现 project.config.json

微信小程序引入VANT组件的方法步骤

内容为当前项目的配置信息以及依赖包的管理。

3.安装vant依赖包(在终端输入)

npm i vant-weapp -S --production

微信小程序引入VANT组件的方法步骤

4.进入小程序开发工具,选择左上角 工具->构建npm

微信小程序引入VANT组件的方法步骤

完成之后项目里会多出依赖包

微信小程序引入VANT组件的方法步骤

5.点击右上角详情并勾选使用npm模块。

微信小程序引入VANT组件的方法步骤

6.选择要在哪个pages里使用该组件

这里以pages下的movie举例,写一个简单的按钮。

如图 在对应的json文件中引入vant的button

微信小程序引入VANT组件的方法步骤

7.在对应wxml文件,写如下代码:

<van-button type="default">默认按钮</van-button>
<van-button type="danger">主要按钮</van-button>

微信小程序引入VANT组件的方法步骤

效果图如下:

微信小程序引入VANT组件的方法步骤

注意:若样式没出来,重复步骤4。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
为javascript添加String.Format方法
Aug 11 Javascript
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 Javascript
javascript Number 与 Math对象的介绍
Nov 17 Javascript
iview form清除校验状态的实现
Sep 19 #Javascript
对layui中table组件工具栏的使用详解
Sep 19 #Javascript
layui自定义工具栏的方法
Sep 19 #Javascript
Node 代理访问的实现
Sep 19 #Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 #Javascript
微信小程序进入广告实现代码实例
Sep 19 #Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 #Javascript
You might like
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
基于ssm框架实现layui分页效果
2019/07/27 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
python学习必备知识汇总
2017/09/08 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
python批量赋值操作实例
2018/10/22 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
高校毕业生自我鉴定
2013/10/27 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
检察院起诉意见书
2015/05/20 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python
Python中rapidjson参数校验实现
2021/07/25 Python