🚀 产品功能

介绍

这里是 Vant 的能力总览与核心组件展示。通过直观的示例，你可以快速了解各类组件的外观与交互，找到最契合业务需求的搭配方式，并在几分钟内完成集成与上线。

🎨 核心组件展示

基础组件

🚀 功能特性

🎯 组件丰富

提供60+个高质量组件，覆盖移动端开发的各种场景：

基础组件

表单组件

反馈组件

展示组件

导航组件

业务组件

📱 移动端优化

🛠️ 开发体验

🎨 设计规范

色彩系统

统一的品牌色彩规范

<van-grid-item>
  <van-card title="字体系统" desc="清晰的字体层级">
    <template #thumb>
      <div class="typography-demo">
        <div class="text-large">大标题</div>
        <div class="text-medium">中标题</div>
        <div class="text-small">小标题</div>
      </div>
    </template>
  </van-card>
</van-grid-item>

<van-grid-item>
  <van-card title="间距系统" desc="统一的空间规范">
    <template #thumb>
      <div class="spacing-demo">
        <div class="spacing-item xs"></div>
        <div class="spacing-item sm"></div>
        <div class="spacing-item md"></div>
        <div class="spacing-item lg"></div>
      </div>
    </template>
  </van-card>
</van-grid-item>

<van-grid-item>
  <van-card title="圆角系统" desc="现代化的圆角设计">
    <template #thumb>
      <div class="radius-demo">
        <div class="radius-item small"></div>
        <div class="radius-item medium"></div>
        <div class="radius-item large"></div>
      </div>
    </template>
  </van-card>
</van-grid-item>

📚 相关内容

• 客户案例 — 了解真实项目如何使用 Vant
• 设计规范 — 保持一致的视觉与体验
• 快速开始 — 立即启动你的项目