微信小程序引入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 相关文章推荐
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
JS截取字符串实例详解
Nov 24 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
Vue使用NProgress进度条的方法
Sep 21 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
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基于工厂模式实现的计算器实例
2015/07/16 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
jquery之empty()与remove()区别说明
2010/09/10 Javascript
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
Python格式化css文件的方法
2015/03/10 Python
python实现文本文件合并
2015/12/29 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
python django中8000端口被占用的解决
2019/12/17 Python
python中提高pip install速度
2020/02/14 Python
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
日语翻译个人求职的自我评价
2013/10/14 职场文书
2014年保育员工作总结
2014/12/02 职场文书
导游欢迎词范文
2015/01/23 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
海上钢琴师观后感
2015/06/03 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
Java后台生成图片的完整步骤
2021/08/04 Java/Android
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers