微信小程序引入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应该怎样学
Apr 16 Javascript
JavaScript中的细节分析
Jun 30 Javascript
jQuery实现的Div窗口震动特效
Jun 09 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
js获取滚动距离的方法
May 30 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 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产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
mac下Apache + MySql + PHP搭建网站开发环境
2014/06/02 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
python制作花瓣网美女图片爬虫
2015/10/28 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
Python3 处理JSON的实例详解
2017/10/29 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
python如何从文件读取数据及解析
2019/09/19 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
如何启动时不需输入用户名与密码
2014/05/09 面试题
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
社区禁毒工作方案
2014/06/02 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
国庆宣传标语
2014/06/30 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
失恋33天观后感
2015/06/11 职场文书