微信小程序引入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 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
JavaScript类库D
Oct 24 Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
Vue分页组件实例代码
Apr 17 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
在vue中使用setInterval的方法示例
Apr 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+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
yii操作cookie实例简介
2014/07/09 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
js html实现计算器功能
2018/11/13 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
angular *Ngif else用法详解
2020/12/15 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
Python中zfill()方法的使用教程
2015/05/20 Python
python实现中文转换url编码的方法
2016/06/14 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
资深财务管理人员自我评价
2013/09/22 职场文书
个人自我鉴定写法
2013/11/30 职场文书
文明家庭先进事迹材
2014/01/27 职场文书
中标通知书格式
2015/04/17 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android