微信小程序引入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 相关文章推荐
jquery实现excel导出的方法
Apr 04 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
对layui中的onevent 和event的使用详解
Sep 06 Javascript
JS 5种遍历对象的方式
Jun 16 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与java通过socket通信的实现代码
2013/10/21 PHP
php使用websocket示例详解
2014/03/12 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
PHP echo()函数讲解
2019/02/15 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
js下获取div中的数据的原理分析
2010/04/07 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
基于jquery实现日历签到功能
2020/09/11 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
服装设计师职业生涯规划范文
2014/02/28 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
详解MySQL中的pid与socket
2021/06/15 MySQL
5行Python代码实现一键批量扣图
2021/06/29 Python