微信小程序引入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 相关文章推荐
一个用js实现的页内搜索代码
May 23 Javascript
jQuery 剧场版 你必须知道的javascript
May 27 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
Dec 08 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 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设计模式之责任链模式的深入解析
2013/06/13 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
Python实现读取json文件到excel表
2017/11/18 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
银行优秀员工事迹
2014/02/06 职场文书
交通事故私了协议书
2014/04/16 职场文书
培训研修方案
2014/06/06 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
一年级语文教学随笔
2015/08/14 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
创业的9条正确思考方式
2019/08/26 职场文书