uni-app使用Vant组件

最新推荐文章于 2024-06-22 11:05:01 发布
最新推荐文章于 2024-06-22 11:05:01 发布
阅读量8.1k 收藏 19
点赞数
分类专栏： Uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hahahhahahahha123456/article/details/109807409
版权
本文介绍了如何在uni-app中使用Vant组件，包括Vant的不同版本适用场景，详细步骤涉及下载源码、配置pages.json及main.js，以及特别注意事项，如消息提示组件的特殊引入方式。
摘要由CSDN通过智能技术生成

前言

vant ui有h5版和微信小程序版。其h5版只能用于h5，其微信小程序版（vant weapp）可用于微信和App，从uni-app 2.4.7起，H5和QQ小程序也支持了微信小程序组件。

使用步骤

下载代码

  • 在项目根目录下新建 wxcomponents 目录 ，此目录应该与components 目录同级。

  • 直接通过 git 下载 vant-weapp 最新源代码，并将dist目录拷贝到新建的wxcomponents目录下，并重命名dist为vant-weapp。

  • 在pages.json的globalStyle中 引入所需要的组件

    ​

    "usingComponents": { //这里为方便，全局引入了所有组件，也可以在某个page下单独引用某个组件
			"demo-block": "/wxcomponents/vant/demo-block/index",
			"van-action-sheet": "/wxcomponents/vant/action-sheet/index",
			"van-area": "/wxcomponents/vant/area/index",
			// "van-badge": "/wxcomponents/vant/badge/index",
			// "van-badge-group": "/wxcomponents/vant/badge-group/inde
最低0.47元/天 解锁文章
I-T枭
关注
专栏目录
uniapp - 解决引入使用vant组件库时出现报错 Module build failed (x) SyntaxError | @import ‘../common/index.css‘；.van
高级前端工程师
08-08 3927
uniapp，vantUI，有赞组件库，报错，uniApp适用vant组件库控制台出现一大片报错，解决uniapp项目中使用vant Weapp图标组件报错问题，UniApp中引入VantUI后出现报错@import ‘../common/index.css‘；.van-icon{text-rendering:auto；-webkit-font-smoothi，HbuildX中uniapp引入vant出现的报错：Module，详细解决办法，出错，还是不行，有问题，引入VantUI后，运行发现报错了，怎么办，
Uni-App内引入Vant框架
weixin_46704406的博客
10-24 2万+
文章目录 前言 Uni-App优点 搭建项目 问题及解决 总结 前言 最近写一个项目用的是Vue框架，因为后期还要使用推送功能就决定利用Uni-App来进行开发，因为听说Uni-App的多适应功能强，一次开发可以在多个平台运行。 1.Uni-App优点 一套代码编到11个平台，这不是梦想。眼见为实，扫描11个二维码，亲自体验最全面的跨平台效果！（这是官网原话） 2.项目搭建 1.首先在连接中下载vant。链接：vant组件下载链接 上述的...
vue动画Transition组件使用
wuzhanhui0715的博客
06-06 403
vue动画
详解Vant组件的使用
Army-海军的博客
05-20 2万+
Vant是Vue的移动端UI框架，在众多框架中，官方文档写的最好的一个框架。 此文主要讲解关于组件使用的流程和一些组件的理解
uniapp使用vant
latinhui的博客
04-24 2807
背景 操作 1.下载文件 https://github.com/andurils/vant-weapp-uniapp 解压后如图 2.复制文件 在uniapp项目根目录创建wxcomponents 目录，并将上图中标红的dist整个复制到改文件夹下，并改为为vant,如图： 3.文件引用 3.1pages.json 引入组件 在 uniapp 项目的 pages.json 文件中的 globalStyle 属性中使用 usingComponents 引入 vant 组件 "globalStyle": {
[保姆级教程]在uniapp中使用vant框架
肥晨开发的学习之路
06-21 5048
和Vue.js的版本都在不断更新，因此上述步骤可能会随着版本的更新而有所变化。但是，如果你想要全局引入某个组件（这通常不推荐，因为它会增加你的包大小），你可以在。可能已经内置了类似的工具，或者你可能需要根据你的构建工具进行特定的配置。来按需加载组件，那么你可以不用全局引入样式，而是在每个组件中单独引入。然后，在你的模板部分，你可以像使用普通的Vue组件一样使用。的组件时，Babel会自动为你处理样式和组件的按需引入。根据参考文章和Vant的官方文档，在你的Vue 2.x项目的根目录下，使用npm来安装。
uniapp项目中引入vant
热门推荐
baogeprh的博客
05-17 3万+
uniapp项目引入vant-UI 引入方式和踩到的坑 uniapp框架可以写多端的项目和生成多端代码，在引入vant-UI时要确定是写那个端的项目，小程序端和H5项目引入vant组件是不一样的。这个对于刚用uniapp的搬砖人很不友好，容易搞错。今天简单把两种引入的方式在这里讲一下 希望能帮到一些人。 uniapp小程序引入vant方法 .在项目中创建一个文件叫wxcomponents，注意这个文件和page文件平级 2.前往https://github.com/youzan/vant-weapp下
uni-app导入vant(上干货)
weixin_71879136的博客
03-10 2631
uni-app导入vant(上干货)
uni-app中uni-ui和vant-weapp冲突
Dylan666d的博客
03-18 1060
1. 需要下载vant的weapp版源码，将dist目录复制到uniapp项目中，路径：项目/wxcomponents/vant 2. 引入后hbuilderx会自动给每个组件生成一个vue文件，但是会包一层uni-shadow-root，如果同时使用uni官方的组件且是通过easycom的custom使用的，则会冲突，需要将正则改为^uni-((?!(shadow-root)).*) 3. 如果报了vant的css错误（Unclosed bracket），则全局搜索https://img.yzcdn.cn
uni-app整合vant、nuxt
hahahhahahahha123456的博客
04-30 2993
创建uni-app移动端项目使用uni-cli下载 vue create -p dcloudio/uni-preset-vue my-project 下载Nuxt框架 ,无需使用create-nuxt-app. 脚手架 yarn add nuxt 配置package.json文件 { "name": "my-app", "scripts": { "dev": "nuxt", "build": "nuxt build", "generate": ...
uni-app中vant-Weapp组件库的使用
qq_60976312的博客
02-03 1686
uni-app中vant-Weapp组件库的使用
uniapp引入 vant
weixin_37391237的博客
03-15 1万+
2.创建 uniapp 项目,在根目录下新建 一个文件夹wxcomponents ，将下载好的压缩包中的 dist 文件夹放到 wxcomponents 里, 推荐将 dist 重命名为 vant,方式二：通过npm install 方式引入 npm i @vant/weapp -S --production。下载对应版本的压缩包,将文件解压后备用,确保下载的压缩包里有dist 文件夹。4.在pages.json页面将vant的组件注册到对应的页面。一、下载vant源码。
linux docker位置查找,linux – 如何在Docker中获取依赖子图像列表？(1)
2301_77118221的博客
04-26 411
本书是获得了很多读者好评的Linux经典畅销书**《Linux从入门到精通》的第2版**。您应该能够查找父ID以f50f9524513f开头的图像,然后查找这些图像的子图像等.但是.Parent isn’t what you think.,所以在大多数情况下,您需要指定docker图像 – 以上所有才能使其工作,那么你也将获得所有中间层的图像ID.需要《Linux入门到精通》、《linux系统移植》、《Linux驱动开发入门实战》、《Linux开源网络全栈》电子书籍及教程的工程师朋友们劳烦您转发+评论。
uni-app怎么使用vant
weixin_68976164的博客
04-19 766
uniapp有一个自带的ui框架，在创建项目的时候直接选择uniui的模板，这个模板用起来更方便，而且它可以直接使用，不用引入注册。
从0搭建，在uniapp中使用vant组件
Gjing_123的博客
02-06 1035
在uniapp中使用vant（手把手教搭建，从0开始）
在uniapp项目中引入vant
最新发布
weixin_73098736的博客
06-22 711
如果我们在正确配置后无法显示组件，这是因为安装组件库后需要重新运行项目。将之前的dist文件复制到wxcomponents中。会在项目根目录生成node_modules。在pages.json中引入我们需要的组件。全局引入放在"globalStyle"中。我们会需要复制dist，后面会用到。可以全局引入，也可以在单个文件引入。将全局样式添加到App.vue中。此目录要建在根目录下。
uniapp使用Vant ui
weixin_42878337的博客
04-11 7038
网上百度uniapp使用vant时，很多答案都是在根路径下创建文件夹，而且都是基于小程序环境的。创建完成后，加载vant依赖，这里我使用的是vue2，所以加载的事vant2。可以看到vant组件中的按钮已经显示出来了，样式也是可以的。到这里就结束了，可以随意在里面使用你想要的组件啦。vant组件的样式还是可以的，但是针对于uniapp，个人觉得还是使用针对于uniapp开发的框架会好用一些。但是在uniapp中这样是不可以的，本人亲测，勿掉坑了。到这里已经引入成功了，在vue框架中可以直接在这里引入样式。
uni-app小程序使用vant组件
09-13
uni-app是一个跨平台的开发框架，可以用于开发小程序、H5、App等多端应用。而vant是一个基于Vue.js的移动端组件库，提供了丰富的UI组件和交互效果。 要在uni-app小程序中使用vant组件，可以按照以下步骤操作： 1. 在uni-app项目中安装vant组件库。可以通过命令行执行以下指令安装： ``` npm install vant ``` 2. 在uni-app项目的`main.js`文件中引入vant组件库： ```javascript import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); ``` 3. 在需要使用vant组件的页面中，按需引入所需的组件。例如，在某个页面的`<script>`标签中可以这样引入Button组件： ```javascript import { Button } from 'vant'; export default { components: { [Button.name]: Button } } ``` 4. 在页面的模板中，使用引入的vant组件即可。例如，可以在模板中使用Button组件： ```html <template> <div> <van-button type="primary">按钮</van-button> </div> </template> ``` 通过以上步骤，你就可以在uni-app小程序中使用vant组件了。当然，除了Button组件外，你还可以按照同样的方式引入和使用vant提供的其他组件。希望对你有帮助！如有更多问题，请继续提问。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值