Uni-app使用vant和uview组件

已于 2023-05-29 08:16:01 修改
阅读量2k 收藏
点赞数 1
分类专栏： 小程序 文章标签： uni-app vue.js 前端
于 2023-02-23 16:34:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46549023/article/details/129182868
版权
文章详细介绍了如何在uni-app项目中安装和使用vant-weapp及uview-ui组件。首先，vant组件需从GitHub下载并引入到小程序的wxcomponents文件夹。然后，创建uni-app项目。对于uview-ui，可以通过npm安装，并在main.js和pages.json中配置以使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

1.安装vant组件

1.1安装前需知

 1.2.安装

1.3.创建uni-app项目

2.安装uview-ui组件

2.1官网

2.2安装 

2.3安装成功

1.安装vant组件

1.1安装前需知

小程序能使用vant-weapp组件，且官网的安装是直接导入小程序中，不能直接导入uni-app框架中

Vant Weapp - 轻量、可靠的小程序 UI 组件库

 1.2.安装

再github上下载https://github.com/youzan/vant-weapp/releases

其中目录为

讲里面的组件引入自己新创建的wxcomponents文件中且必须是这个名字

1.3.创建uni-app项目

结果成功

2.安装uview-ui组件

2.1官网

uView UI

在线文档介绍 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架 (uviewui.com)

2.2安装 

如果没有pages.json

npm init -y 

安装对应依赖

npm install uview-ui@2.0.31 

在main.js中引入

import uView from "uview-ui";

Vue.use(uView); 

在pages.json引入对应

easycom是一种引入规则，不需要导包就可以使用

	"easycom": {
	"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},

2.3安装成功

uniapp开发app、h5和微信小程序，几个好用的UI框架推荐
rock---you的博客
02-10 1753
uView：如果你希望选择一个功能全面、易用、并且能完美适配 uni-app 的 UI 框架，uView 是最合适的选择。Vant：如果你希望使用一个现代化且美观的组件库，且需要较高质量的 UI，Vant 是一个不错的选择。ColorUI：如果你需要一个轻量、简洁且快速的框架，ColorUI 适合快速开发小型应用。iView：如果你的应用较为复杂且偏向于 Web 端开发，可以考虑 iView，但需要做适配。
uni-app中使用vant注意事项
soooyoung的博客
12-08 6766
需要下载vant的weapp版源码，将dist目录复制到uniapp项目中，路径：项目/wxcomponents/vant 引入后hbuilderx会自动给每个组件生成一个vue文件，但是会包一层uni-shadow-root，如果同时使用uni官方的组件且是通过easycom的custom使用的，则会冲突，需要将正则改为^uni-((?!(shadow-root)).) 如果报了vant的css错误（Unclosed bracket），则全局搜索https://img.yzcdn.cn/vant/van.
Vant UI 组件库解析
最新发布
T_iAn_T的博客
04-02 871
Vant UI 组件库解析
uView、ColorUI与Vant框架的深入分析与案例实践
chenchuang0128的博客
07-10 1783
在未来的移动开发中，我们将继续探索更多优秀的框架和技术，为项目的成功提供有力支持。虽然ColorUI的组件数量有限，但我们通过组合使用已有的组件和自定义样式，成功实现了产品的UI设计。通过利用uView丰富的组件库和强大的自定义能力，我们快速搭建了风格统一的页面，并实现了个性化需求。在开发一款移动商城应用时，我们选择了Vant框架。同时，通过结合其他工具和库，我们也实现了对Vant的定制和扩展，满足了项目的特殊需求。组件丰富：uView提供了大量高质量的组件，涵盖了常见的UI元素，减少了开发者的开发时间。
uni-app调用vant组件或uview组件
weixin_55518113的博客
06-11 689
3.把node-modules中下载vant里面的dist文件夹拿出来放在wxcomponents里。2..把node-modules中下载uview-ui拿出来，放在跟pages同级的位置上。4.在pages.json中找到globalStyle，跟它平级加入easycom。6.在pages.json中找到globalStyle，跟它平级加入easycom。4.在uni.scss上引用。最后就可以直接使用组件了~~3.在main.js中引入。5.在App.vue上引用。
uniapp引用uView和vant Weapp组件
admin_W_KP的博客
03-09 2937
uniapp的引入UI组件库（uview、vant Weapp）
vant组件改为 uview-plus 组件的时分秒组件
qq_30405009的博客
06-27 511
项目中本来使用过了vant 的组件，但是uniapp 和vant并不兼容，除了几个普通的组件能用之外，想使用弹窗的话vant就完成不了了，还好uniapp官方支持的 uview-plus 支持vue3，就给项目更换了。之前使用vant封装的组件这时候也不能使用了 ，只好更换组件，最麻烦的是组件功能类似，时间传递方式传递参数却变了，真是糟心那！经过两天的组件改写总算是完成了 uview-plus 的年月日时分秒的组件封装，还有默认时间的选择，全套代码哦！
uni-app中uni-ui和vant-weapp冲突
Dylan666d的博客
03-18 1168
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
uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水.zip
04-03
而"说明.txt"可能包含了关于如何使用和安装uView的指导，以及可能存在的更新日志和注意事项。 总的来说，uView UI 是uni-app生态中的一个重要组成部分，它的强大功能和易用性使得它成为开发者构建跨平台应用的首选...
uniapp框架-uniapp选择器,包含一级,二级级联,三级级联uni-app项目源码-vue语法格式.zip
05-21
它提供了丰富的原生组件和API封装，保证了应用的原生性能体验，为用户带来流畅的操作感受。 此外，UniApp拥有庞大的社区支持和插件生态系统，为开发者提供了丰富的资源和技术支持。从多级选择器到自定义导航栏，再...
[uni-app] uview封装Popup组件,处理props及v-model的传值问题
iOSTianNan的博客
08-18 2454
的组件, 现在有个需求是,进行简单封装,有些通用的设置不想每次都写(比如。* 通用 center型 - popup弹框, 其内容slot定义,然后说我们就可以通过 show这个状态去控制, 但此时我们会遇到一个报错。就是涉及到了 props单向传递, 与v-model产生了冲突。=>pop弹窗弹出, 只要设置。=>pop弹窗隐藏, 只要设置。uView(1.x版本)中, 有。这里就相当于, 子组件也去更改了。再进一步, 上面的写法也有点麻烦。再看这个地方, 是不是想到。这个props,这显然是。
uni-app的登录页面
Lu_menglin的博客
06-21 836
接下来就是在 uniCloud中的cloudfunctions函数集里创建登录的login函数。注明这个登录功能需要用到阿里云的云数据库空间和创建云函数来简单实现的登陆效果。然在输入前面弄得login表里面得账号和密码，点击立即登录就可以了。然后再去阿里云的云数据库里创建login表储存账号和密码。然后在创建一个新的login的页面。第一步，我们先创建一个项目。uniapp的登录功能介绍。
2024，了解云原生技术栈收藏这一篇就够了（附学习笔记）
2301_79054215的博客
04-26 774
本人现在工作中负责云原生服务管理平台的研发（主要管理各类云原生基础设施，平台服务和第三方托管应用），但即便如此，常被问起云原生是什么时，我也很难简洁的向人表述清楚，导致自我也经常问一遍，云原生究竟是什么，我又在做什么。
从0搭建，在uniapp中使用vant组件
Gjing_123的博客
02-06 1335
在uniapp中使用vant（手把手教搭建，从0开始）
uniapp开发微信小程序/h5完整流程，含vant/uview(h5适配vw)
张伟的专栏
05-02 629
uniapp开发微信小程序/h5完整流程，含vant/uview(h5适配vw)_热爱生活的大辉的博客-CSDN博客
uniapp的h5端和小程序端同时引入vant-weapp和遇到的报错
weixin_44730534的博客
11-24 2221
uniapp的h5端和小程序端同时引入vant-weapp和遇到的报错 “usingComponents”: { “van-button”: “/wxcomponents/vant/button/index”, “van-cell”: “/wxcomponents/vant/cell/index”, “van-cell-group”: “/wxcomponents/vant/cell-group/index”, “van-icon”: “/wxcomponents/vant/icon/index”,
uni-app引入vant
克里斯蒂亚诺更新的博客
07-17 573
如果是PC开发，main.js为：（加入了vant）pages.json: 引入组件。安装后出现@vant。
uniapp是否可以用vant等移动端UI库、使用步骤以及需要注意的问题
商务合作 / 项目定制开发 / 前端一对一培训、答疑
12-04 8715
解决方法，修改 ~node_modules\vant\lib\index.css 文件，将该文件中的 “url” 改为 “ url” ，一共需修改2处。其他问题，请参考：https://github.com/youzan/vant/issues?原因是微信小程序不支持document，window对象，所以navigator自然是无法使用的。参考文章：https://github.com/youzan/vant/issues/12421。1、安装Vant Version 2.13.2后，导入样式，报错。
uniapp项目引入vant4 npm下载
Working_hard_111的博客
01-30 2233
uniapp使用vant4 npm下载 并全局注册
uniapp 实现nvue模拟顶部吸顶+左右滑动切换选项卡
11-20
uniApp中的nVue（实际上是Vue的语法糖，底层由Taro实现）要实现顶部吸顶和左右滑动切换选项卡功能，你可以按照以下步骤进行： 1. **顶部吸顶效果**： - 首先，在HTML结构中设置一个固定头部区域`<header>`，并给它添加CSS样式使其在页面滚动时保持定位。例如： ```html <template> <view class="scroll-view"> <header class="fixed-header">顶部标题</header> <tab-container ref="tabContainer" /> </view> </template> ``` ```css .fixed-header { position: sticky; top: 0; z-index: 100; } ``` 2. **左右滑动切换选项卡**： - 使用`van-tabs`组件（来自vant UI库），它支持左右滑动切换选项卡。在Vue组件中安装 vant，并导入 tabs 组件： ```bash npm install vant ``` ```javascript import { VanTabs } from 'vant'; ``` - 在模板中使用`VanTabs`： ```html <van-tabs v-model="activeIndex" @change="handleChange"> <van-tab :title="tabTitles[i]" v-for="(tabTitle, i) in tabTitles" :key="i"> <keep-alive> <component :is="tabComponents[i]" /> </keep-alive> </van-tab> </van-tabs> ``` - 管理选项卡状态和切换事件： ```javascript data() { return { activeIndex: 0, tabTitles: ['选项卡1', '选项卡2'], tabComponents: ['tab1Component', 'tab2Component'] }; }, methods: { handleChange(index) { this.activeIndex = index; } } ``` - 对每个选项卡组件，你可能还需要处理自适应内容、触摸手势滑动等操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值