微信小程序引入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 相关文章推荐
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
原生javascript实现图片轮播效果代码
Sep 03 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
js格式化时间的简单实例
Nov 27 Javascript
js 调用百度分享功能
Feb 27 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 Javascript
js实现点赞按钮功能的实例代码
Mar 06 Javascript
使用Vant完成Dialog弹框案例
Nov 11 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基础知识回顾
2012/08/16 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
js实现表格字段排序
2014/02/19 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
js实现微信聊天效果
2020/08/09 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
js制作提示框插件
2020/12/24 Javascript
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
pandas数据清洗,排序,索引设置,数据选取方法
2018/05/18 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
Django中的用户身份验证示例详解
2019/08/07 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
财务助理岗位职责
2013/11/10 职场文书
邮政员工辞职信
2014/01/16 职场文书
运动会入场解说词
2014/02/07 职场文书
情人节活动策划方案
2014/02/27 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
幼师个人总结范文
2015/02/28 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
感恩的心主题班会
2015/08/12 职场文书