微信小程序引入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中的事件处理
Jan 16 Javascript
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
jquery 无限级联菜单案例分享
Mar 26 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
Javascript call和apply区别及使用方法
Nov 14 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
Mar 17 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 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/06/09 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
对比分析json及XML
2014/11/28 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
Python的Django框架使用入门指引
2015/04/15 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
python实现二叉查找树实例代码
2018/02/08 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
python实现图片素描效果
2020/09/26 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
《山谷中的谜底》教学反思
2014/04/26 职场文书
领导干部廉政自律承诺书
2014/05/26 职场文书
企业安全标语
2014/06/07 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
python tkinter模块的简单使用
2021/04/07 Python
Go语言读取txt文档的操作方法
2022/01/22 Golang