轻量、可靠的移动端组件库 Vant 1.0 正式发布

Vant是有赞前端团队维护的一款轻量级移动端Vue组件库,提供多种UI基础组件和业务组件,支持组件按需加载、公共模块复用等功能。组件平均体积仅8.8KB,经过压缩后约1KB。此外,还介绍了其生态体系及未来发展方向。

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

【回复“1024”,送你一个特别推送】

说实话,最近已经快一年没有接触过原生开发了,随着接触开发微信小程序,接触 Vue 等,也越来越喜欢这种 JS 前端开发,感觉特别好玩。不管是 Vue ,还是 React ,还是微信小程序开发,其实都是大同小异,开发方式也都是响应式的开发,饿了么开源的 Element UI 也挺好的。

所以,每天学习,进步,然后越来越喜欢真的是一种幸福。好了,不感慨了,进入正题。

我最近发现其实有赞技术团队其实挺强大的。前一段时间我在微信小程序资料的文章中分享过有赞技术团队开源的 zanui-weapp 微信小程序组件 UI 库,包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、tab、toast、toptips 等各种组件或元素,样式也很美观。

顺便再发一下开源地址和样例吧,以防止没看过之前文章的同学学习一下。一切分享不留名和地址的分享都是伪分享。哈哈……

开原地址:

https://github.com/youzan/zanui-weapp

好了,夸完有赞团队,那就介绍主角吧。有赞技术团队开源的移动端组件库 Vant 1.0 正式发布啦。Vant 是有赞前端团队维护的移动端 Vue 组件库,提供了一整套 UI 基础组件和业务组件。通过 Vant 可以快速搭建出风格统一的页面,提升开发效率。

作为移动端组件库,Vant 一直将轻量化作为核心开发理念。为了平衡日益丰富的功能和轻量化之间的矛盾关系,我们尝试了很多的优化方式,包括支持组件按需加载、公共模块复用、组件编译流程优化等。

在应用一系列的优化手段之后,目前 Vant 的组件平均体积仅有 8.8KB,Uglify + Gzip 后约 1KB。作为对比,mint-ui 的组件平均体积为 15.2KB,某些组件库的组件平均体积甚至在 25KB 以上。所以,它很轻量。

除了提供组件以外,他们也在为丰富 Vant 的开发生态做很多尝试,希望能覆盖各个场景下的开发需求,为大家提供便利。下面是我们现有的一些生态或能力:

  • 基于 vue-cli 的脚手架 vue-cli-template-vant

  • 支持 nuxt 服务器端渲染

  • 支持 Typescript 类型检测

  • 支持 i18n 多语言定制

  • 支持通过 postcss 插件进行主题定制

  • 官方 Demo 仓库 - vant-demo

  • 基于相同视觉规范的小程序组件库 - zanui-weapp

  • 开源社区的移动商城示例项目 - vant--mobile-mall

在生态化方面他们有赞团队还有有很多需要补齐的方面,比如提供对 rem 的支持、vscode 代码提示插件等,他们在 2018 年将会在这些方面努力。

既然是移动端的组件库,那我们就来看看它包含哪些组件呢?

最后,大家可以长按扫描下方二维码,体验一下这些组件,在手机中的效果和效率,看看怎么样?

另外,我最近有点喜欢上 Vue 开发了。

### 适用于HTML5移动端的UI组件框架列表 以下是一些适用于HTML5移动端开发的UI组件框架,它们提供了丰富的组件库和工具,能够帮助开发者快速构建高质量的移动应用界面。 1. **Ionic Framework** Ionic Framework 是一个开源框架,支持使用HTML5技术构建跨平台移动应用程序。它包含了许多现代化的UI组件,如导航、标签、列表等,适合需要跨平台兼容性的项目[^1]。 ```html <ion-content> <ion-button expand="full" color="primary">点击我</ion-button> </ion-content> ``` 2. **Konsta UI** Konsta UI 是一个专注于移动端界面开发的组件库,支持多平台兼容(iOS和Material Design风格),并且基于Tailwind CSS,具有高度自定义能力。它的组件涵盖了导航、表单、按钮、卡片等功能,非常适合需要精美设计的项目[^2]。 3. **FirstUI** FirstUI 是一个高效的跨平台移动端UI组件库,提供了丰富的组件以满足不同场景的需求。开发者可以通过直接拷贝组件代码到项目中来快速使用这些UI元素[^3]。 4. **React Vant** React Vant 是一个专注于移动端应用开发的UI组件库,支持HTML5环境下的快速开发。它适用于电商、社交、金融等多种类型的移动应用开发,并且可以结合React Native实现跨平台开发[^4]。 5. **Onsen UI** Onsen UI 是一个专门为HTML5移动端应用设计的UI框架,支持AngularJS和Vue.js等前端框架。它提供了丰富的组件库,包括导航、对话框、滑动菜单等,适合需要高性能和轻量级解决方案的项目。 6. **Framework7** Framework7 是一个完整的HTML框架,专为开发混合移动应用程序而设计。它支持HTML5标准,并提供了一系列现代的移动端UI组件,如侧边栏、模态框、表格等。Framework7 还支持React、Vue和Svelte等现代前端框架。 7. **Mobiscroll** Mobiscroll 是一个功能强大的移动端UI组件库,支持HTML5和JavaScript开发。它提供了日期选择器、时间选择器、滚动选择器等高级组件,适合需要复杂交互的移动应用。 8. **Bootstrap Mobile** Bootstrap Mobile 是基于Bootstrap的移动端优化版本,支持HTML5开发。虽然Bootstrap本身是为桌面端设计的,但其移动端友好的特性使其成为许多HTML5移动端项目的首选。 --- ### 示例代码:使用Ionic Framework创建简单的HTML5移动端页面 以下是一个使用Ionic Framework创建的简单HTML5移动端页面示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script> <link href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" rel="stylesheet"> <title>HTML5 移动端示例</title> </head> <body> <ion-app> <ion-header> <ion-toolbar color="primary"> <ion-title>欢迎使用Ionic</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-button expand="full" color="secondary">点击我</ion-button> </ion-content> </ion-app> </body> </html> ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值