如何在uni-app中使用vant组件？最细教学，还看不懂你来捶我

重要日志更新：

2023/2/25：现行版本这种写法只支持微信小程序的开发，可别拿它写h5，不然你会崩溃的o(╥﹏╥)o

前言：

最近在做uni-app的时候需要用到vant组件，在网上看到了很多的使用vant组件的方法，但是讲解的大多繁琐，或者无法使用，现把最新，最实用的vant组件的使用方法分享给大家。

步骤一：

打开 Hbulider x ，然后新建项目；

步骤二：

填写项目名称，选择模板，vue技术栈，...详细如图，然后点击创建即可

步骤三：

在与pages 同级目录先创建一个名称为： wxcomponents的文件夹，不会操作的话看图。

步骤四：

在我们刚才新建的wxcomponents 目录下新建一个 @vant 的文件夹，建立目录方法就和步骤三一样，只不过这一次我们要在 wxcomponents 目录下建立子目录 @vant

步骤五：

浏览器打开这个链接：

vant-weapp GitHub官方文档https://github.com/youzan/vant-weapp/releases 下载如图所示的压缩包

步骤六：

打开压缩包后，将文件夹打开，然后找到 dist 文件夹，将这个文件夹复制粘贴到我们步骤四新建的 @vant 空文件夹中，并且改名为： weapp, 如图所示：

步骤七：

在全局的page.json进行全局注册，使它变成全局可用！如图所示：

写在最后：

为什么我们要改文件夹名字，因为我们看到，vant组件内部给我们的引入方案就是：

那我们这样创建文件夹，和它嵌套的路径一样，是不是后面使用复制vant 提供的路径就OK了？

这样更省时间，更省事。

再多提一嘴，vant组件是配合原生小程序使用的，所有有些地方，比如data数据渲染，我们不能直接照抄，一般用vue的思路就可以解决啦。

好啦，最细教学结束，债见！！！！

如何在uni-app中使用vant组件？最细教学，还看不懂你来捶我相关推荐

uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
微信小程序中使用vant组件库（超详细）
目录前言 Vant Weapp的安装与使用 1.安装 node.js 2.通过 npm 安装 3.修改 app.json 4.修改 project.config.json 5.构建 npm 包 6. ...
android 发广播屏蔽home键,如何在Android App中屏蔽（拦截）Home按键及其他按键
如何在Android App中屏蔽(拦截)Home按键及其他按键 (2013-09-08 13:29:11) 标签: 关键按键关键点方法安卓 it 编写一个Acitivity,如下所示: 关键 ...
微信小程序中引用vant组件库
步骤 1.vant组件库里面也有说明,它说package.json 和 node_modulles 必须在miniprogram目录下,可是一般你刚新建一个小程序项目的时候,是没有package.js ...
【uniapp】小程序中修改Vant组件navbar左箭头的颜色及图标与背景
感觉自己封装的返回组件不太好用,于是尝试用一下Vant组件库里的 NavBar [uniapp]小程序自定义一个通用的返回按钮组件_小付学代码的博客-CSDN博客_uniapp自定义返回按钮左边箭头, ...
android支付宝支付微信支付封装,如何在Android App中集成支付宝和微信支付功能
前言本文主要介绍如何在 Android App 里集成支付宝和微信支付的功能,文中将实现的步骤一步步介绍的非常详细,对同样遇到这个问题的朋友相信会是一个很好的参考,下面话不多说了,来一起看看详细的介 ...
如何在vue文件中引入heyui组件库
1.npm 下载 npm install heyui 2. 此处我选择以js的形式引入main.js // css引用 import (less) "~heyui/themes/index. ...
【vant】app局部引入vant组件
1.npm i vant -S 2 按需引入安装babel-plugin-import npm i babel-plugin-import -D 3 需要在main.js引入 import 'van ...
python中文昵称-官方出品 Python 中文文档！拜托，别再说看不懂了
点击" 开发者技术前线 ",选择"星标�" 在看|星标|留言, 真爱回复"666",获取一份技术人专属大礼包作者:机器之心参与:思源 ...

如何在uni-app中使用vant组件？最细教学，还看不懂你来捶我

如何在uni-app中使用vant组件？最细教学，还看不懂你来捶我相关推荐

最新文章

热门文章