Vant移动端UI企业级解决方案

🚀 企业级特性展示 ​

组件丰富

60+ 高质量组件

轻量高效

按需引入，体积更小

TypeScript

完整的类型定义

主题定制

灵活的样式配置

📊 技术优势 ​

Vue 3 生态

完全基于Vue 3构建，享受最新的Composition API和性能优化

移动端优化

专为移动设备优化，支持触摸手势和响应式设计

企业级支持

提供专业的技术支持和定制化解决方案

🎯 快速体验 ​

体验Vant组件

查看文档

下载源码

Vant

🚀 轻量、可定制的移动端 Vue 组件库

🎉 欢迎来到 Vant 的世界！ ​

✨ 什么是 Vant？ ​

Vant 是一个轻量、可定制的移动端组件库，自 2017 年开源以来，已经成为了移动端开发者的得力助手！就像一个装满了各种精美工具的百宝箱，Vant 为你的移动端开发之旅提供了一切所需。

想象一下，你正在建造一座美丽的移动端应用大厦，Vant 就是为你准备的高品质建筑材料库。无论你需要按钮、表单、弹窗还是复杂的交互组件，这里都有现成的、经过精心打磨的解决方案等着你！

🌈 多端支持，一库搞定 ​

Vant 就像一个多才多艺的演员，能在不同的舞台上精彩演出：

• 🎭 Vue 2 版本 - 为经典项目保驾护航
• 🎪 Vue 3 版本 - 拥抱现代化开发体验
• 📱 微信小程序版本 - 小程序开发的不二选择
• ⚛️ React 版本 - 社区维护，同样精彩
• 💰 支付宝小程序版本 - 覆盖更多平台

🌟 为什么选择 Vant？ ​

🚀 性能王者 ​

• 轻如羽毛：组件平均体积小于 1KB（min+gzip），让你的应用飞起来！
• 丰富全面：80+ 个高质量组件，覆盖移动端开发的方方面面
• 零负担：零外部依赖，不会给你的项目带来额外包袱

💪 品质保证 ​

• 类型安全：使用 TypeScript 编写，让 IDE 成为你的最佳伙伴
• 测试覆盖：单元测试覆盖率超过 90%，每一行代码都经过严格验证
• 文档完善：提供丰富的中英文文档和组件示例，学习无障碍

🎨 设计友好 ​

• 设计资源：提供 Sketch 和 Axure 设计资源，设计师和开发者无缝协作
• 主题定制：内置 700+ 个主题变量，打造独一无二的视觉风格
• 深色模式：紧跟时代潮流，支持深色模式切换

🍭 开发体验 ​

• 多框架支持：Vue 2、Vue 3、微信小程序，想用哪个用哪个
• Nuxt 友好：支持 Nuxt 2、Nuxt 3，提供专门的 Vant Module
• 按需引入：支持 Tree Shaking，只打包你用到的组件
• 无障碍访问：关注每一个用户，持续改进可访问性
• 服务器端渲染：SEO 友好，首屏加载更快
• 国际化：内置 30+ 种语言包，让你的应用走向世界

📋 版本选择指南 ​

💡 小贴士：你当前浏览的是 Vant 4.x 版本 的文档，这是专为 Vue 3 量身定制的最新版本！

如果你的项目还在使用 Vue 2，别担心，我们也为你准备了 Vant 2 文档。就像选择合适的工具一样，选择合适的版本能让你的开发事半功倍！

🛠️ 推荐脚手架 - Rsbuild ​

想要快速启动一个项目？我们强烈推荐使用 Rsbuild！

为什么选择 Rsbuild？

• ⚡ 极速构建：基于 Rspack 的构建工具，构建速度快到飞起
• 👨‍💻 原生支持：由 Vant 作者亲自开发，对 Vant 提供第一优先级支持
• 🎯 开箱即用：零配置启动，让你专注于业务逻辑而不是工具配置
• 🔧 开发体验：一流的开发体验，热更新、错误提示样样俱全

一键创建项目：

npm create rsbuild@latest

就这么简单！一杯咖啡的时间，你的项目就准备好了。想了解更多黑科技？请访问 Rsbuild 仓库。

🚀 开始你的 Vant 之旅 ​

迫不及待想要开始了吗？请阅读 快速上手 章节！

在这个章节中，你将学会：

• 📦 如何安装 Vant（多种方式任你选择）
• 🎨 如何引入你的第一个组件
• ⚙️ 如何配置按需引入（让你的应用更轻量）
• 🎯 基本使用技巧和最佳实践

相信我，跟着我们的指南走，你很快就能成为 Vant 高手！

🌐 浏览器兼容性 ​

我们深知兼容性的重要性，Vant 在这方面做得相当不错：

Vant 4.x / 3.x（当前推荐） ​

• ✅ 现代浏览器：Chrome、Firefox、Safari、Edge 等
• ✅ 移动端：Chrome >= 51、iOS >= 10.0
• 🎯 与 Vue 3 保持一致：确保最佳兼容性

Vant 2.x（Vue 2 项目） ​

• ✅ 更广泛支持：Android >= 4.0、iOS >= 8.0
• 📱 老设备友好：照顾那些还在使用老设备的用户

小贴士：如果你的项目需要支持更老的设备，Vant 2.x 可能是更好的选择。但如果你在开发新项目，我们强烈建议使用 Vant 4.x + Vue 3 的组合，享受最新的特性和最佳的性能！

📊 版本维护状态 ​

想知道各个版本的"健康状况"吗？这里有最新的体检报告：

版本	框架	发布时间	最新版本	维护状态	推荐指数
Vant 4 🌟	Vue 3	2022.12		🟢 长期支持	⭐⭐⭐⭐⭐
Vant 3	Vue 3	2020.12		🔴 终止支持	⭐⭐
Vant 2	Vue 2	2019.06		🔴 终止支持	⭐⭐
Vant 1	Vue 2	2018.03		🔴 终止支持	⭐

💡 建议：新项目请优先选择 Vant 4，它是我们的当家花旦，拥有最新的特性、最好的性能和最完善的支持！

🔗 生态链接 ​

🏠 官方大家庭 ​

这些都是 Vant 官方团队精心维护的项目，就像一个温馨的大家庭：

🌍 社区生态圈 ​

社区的力量是无穷的！这些由社区小伙伴们维护的项目同样精彩，欢迎大家补充更多优秀项目：

🔗 实用链接 ​

• 💬 意见反馈 - 遇到问题？告诉我们！
• 🗣️ Discussions 讨论区 - 与社区一起交流

👥 贡献者大家庭 ​

🌟 核心团队 ​

这些是 Vant 和 Vant Weapp 的核心贡献者们，他们是 Vant 能够持续发展的中坚力量：

chenjiahan	cookfront	wangnaiyi	pangxie	rex-zsd	nemo-shen

Lindysen	JakeLaoyu	landluck	wjw-gavin	inottn	zhousg

🎉 社区贡献者 ​

感谢以下小伙伴们为 Vant 发展做出的贡献，正是因为有了大家的支持，Vant 才能越来越好！

🤝 如何参与贡献 ​

想要成为 Vant 大家庭的一员吗？我们随时欢迎你的加入！

贡献方式：

• 📖 阅读指南：请先阅读我们的 贡献指南，了解贡献流程
• 🐛 报告问题：发现 Bug？请提交 Issue 告诉我们
• 💡 提出建议：有好的想法？欢迎在 Discussions 中分享
• 🔧 贡献代码：欢迎提交 Pull Request，让 Vant 变得更好

贡献奖励：

• 🏆 你的名字将出现在贡献者列表中
• 🎖️ 获得 Vant 贡献者专属徽章
• 🌟 在开源社区中建立个人影响力
• 💪 提升技术能力和代码质量

📄 开源协议 ​

本项目基于 MIT 协议 开源，这意味着：

• ✅ 自由使用：可以在任何项目中免费使用
• ✅ 自由修改：可以根据需要修改源代码
• ✅ 自由分发：可以自由分享给其他人
• ✅ 商业友好：可以在商业项目中使用

请自由地享受和参与开源的乐趣！

📚 相关内容 ​

🚀 快速开始 ​

• 快速上手 - 5 分钟上手 Vant
• 安装指南 - 多种安装方式任你选择
• 基础用法 - 掌握基本使用技巧
• 最佳实践 - 学习高效开发方法

🎨 定制与主题 ​

• 主题定制 - 打造独特的视觉风格
• 设计资源 - 获取设计稿和图标资源
• 样式覆盖 - 深度定制组件样式
• CSS 变量 - 了解所有可定制的变量

🔧 高级功能 ​

• 按需引入 - 优化包体积
• 国际化 - 多语言支持
• 服务端渲染 - SSR 配置指南
• TypeScript - 类型定义和使用

🛠️ 开发工具 ​

• Vant CLI - 组件库开发工具
• 开发环境搭建 - 本地开发指南
• 调试技巧 - 常见问题排查
• 性能优化 - 让应用更快更流畅

🌐 多端支持 ​

• 微信小程序 - 小程序版本使用指南
• React 版本 - React 开发者的选择
• Nuxt 集成 - 服务端渲染框架集成
• uni-app 适配 - 跨平台开发指南

💬 社区与支持 ​

• GitHub Issues - 问题反馈和 Bug 报告
• GitHub Discussions - 社区讨论和经验分享
• 更新日志 - 了解版本更新内容
• 迁移指南 - 版本升级指导

📖 学习资源 ​

• 组件总览 - 浏览所有可用组件
• 示例项目 - 完整项目示例
• 视频教程 - 视频学习资源