微信小程序引入VANT组件的方法步骤

 更新时间:2019年09月19日 09:54:26   作者:薇薇  
这篇文章主要介绍了微信小程序引入VANT组件的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

1.右键项目名称->在终端中打开


2.在终端输入 npm init 用来初始化,然后一直回车默认就Ok。

之后项目中会出现 project.config.json


内容为当前项目的配置信息以及依赖包的管理。

3.安装vant依赖包(在终端输入)

npm i vant-weapp -S --production

4.进入小程序开发工具,选择左上角 工具->构建npm


完成之后项目里会多出依赖包

5.点击右上角详情并勾选使用npm模块。


6.选择要在哪个pages里使用该组件

这里以pages下的movie举例,写一个简单的按钮。

如图 在对应的json文件中引入vant的button


7.在对应wxml文件,写如下代码:

<van-button type="default">默认按钮</van-button>
<van-button type="danger">主要按钮</van-button>


效果图如下:

注意:若样式没出来,重复步骤4。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • js中的数组转树型结构方式

    js中的数组转树型结构方式

    这篇文章主要介绍了js中的数组转树型结构方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 微信小程序使用map组件实现路线规划功能示例

    微信小程序使用map组件实现路线规划功能示例

    这篇文章主要介绍了微信小程序使用map组件实现路线规划功能,结合具体实例形式分析了微信小程序基于map组件的地理位置获取、路径规划等相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • NestJS装饰器实现GET请求

    NestJS装饰器实现GET请求

    本文介绍了如何通过装饰器实现GET请求,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-10-10
  • javascript图片预加载实例分析

    javascript图片预加载实例分析

    这篇文章主要介绍了javascript图片预加载的方法,实例分析了javascript实现图片预加载的方法与相关注意事项,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • 微信小程序自定义tabbar组件

    微信小程序自定义tabbar组件

    这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • 发两个小东西,ASP/PHP 学习工具。 用JavaScript写的

    发两个小东西,ASP/PHP 学习工具。 用JavaScript写的

    发两个小东西,ASP/PHP 学习工具。 用JavaScript写的...
    2007-04-04
  • JS实现二叉查找树的建立以及一些遍历方法实现

    JS实现二叉查找树的建立以及一些遍历方法实现

    本篇文章主要介绍了JS实现二叉查找树的建立以及一些遍历方法实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-04-04
  • JavaScript实现在页面间传值的方法

    JavaScript实现在页面间传值的方法

    这篇文章主要介绍了JavaScript实现在页面间传值的方法,涉及javascript传值的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • Android中Okhttp3实现上传多张图片同时传递参数

    Android中Okhttp3实现上传多张图片同时传递参数

    本篇文章主要介绍了Android中Okhttp3实现上传多张图片同时传递参数 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • JS实现盒子拖拽效果

    JS实现盒子拖拽效果

    这篇文章主要为大家详细介绍了JS实现盒子拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02

最新评论