微信小程序引入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 相关文章推荐
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 Javascript
JavaScript 巧学巧用
May 23 Javascript
vue实现验证码按钮倒计时功能
Apr 10 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 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用substr函数截取字符串中的某部分
2016/12/03 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
遍历jquery对象的代码分享
2011/11/02 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
Python 实现链表实例代码
2017/04/07 Python
python的mysqldb安装步骤详解
2017/08/14 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
如何基于Python批量下载音乐
2019/11/11 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
副总经理工作职责
2013/11/28 职场文书
遥感技术与仪器求职信
2014/02/22 职场文书
副处级干部考察材料
2014/05/17 职场文书
经营理念口号
2014/06/21 职场文书
酒店端午节活动方案
2014/08/26 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL