微信小程序引入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将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
angularjs指令之绑定策略(@、=、&amp;)
Apr 13 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
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 URL编码解码函数代码
2009/03/10 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
Laravel下生成验证码的类
2017/11/15 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
CentOS安装pillow报错的解决方法
2016/01/27 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
数控加工专业毕业生自荐信
2013/09/27 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
自我检讨报告
2015/01/28 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
pandas取dataframe特定行列的实现方法
2021/05/24 Python
python中%格式表达式实例用法
2021/06/18 Python
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS
python运行脚本文件的三种方法实例
2022/06/25 Python