⚡

vant-vue3Skill vant-vue3

这是一个用于 Vant Vue 3 移动组件库的技能，提供全面的指导和最佳实践，帮助开发者使用 Vue 3 构建移动应用。它涵盖了多种移动 UI 组件（如按钮、表单、对话框）、主题定制、国际化和 TypeScript 支持。关键词：Vant, Vue 3, 移动组件, 移动开发, 组件库, 主题定制, 国际化, TypeScript。

移动开发 0 次安装 0 次浏览 更新于 3/21/2026

名称: vant-vue3 描述: 提供全面的 Vant Vue 3 移动组件库指导，包括移动组件、主题和最佳实践。当用户询问 Vant、需要构建 Vue 3 移动应用或实现移动 UI 组件时使用。 许可证: 完整条款在 LICENSE.txt 中

何时使用此技能

使用此技能当用户想要：

  • 使用 Vant 组件构建移动 Vue 3 应用程序
  • 使用 Vant UI 组件（按钮、单元格、表单、对话框、提示等）
  • 创建移动友好的界面
  • 自定义 Vant 主题
  • 使用 Vant 实现国际化
  • 将 Vant 与 TypeScript 一起使用
  • 处理移动手势和交互
  • 实现移动导航模式
  • 使用移动表单组件
  • 创建移动数据显示组件

如何使用此技能

此技能组织成匹配 Vant Vue 3.0 官方文档结构（https://vant-ui.github.io/vant/#/zh-CN）。使用 Vant 时：

  1. 从用户请求中识别主题：

    • 快速开始 → examples/getting-started/installation.md 或 examples/getting-started/basic-usage.md
    • 按钮 → examples/components/button.md
    • 单元格 → examples/components/cell.md
    • 表单 → examples/components/form.md
    • 对话框 → examples/components/dialog.md
    • 提示 → examples/components/toast.md
    • 弹出层 → examples/components/popup.md
    • 主题 → examples/advanced/theme-customization.md

  2. 从 examples/ 目录加载相应的示例文件：

    快速开始 - examples/getting-started/：

    • examples/getting-started/installation.md - 安装 Vant 和基本设置
    • examples/getting-started/basic-usage.md - 基本组件用法

    组件 - examples/components/：

    • examples/components/button.md - 按钮组件
    • examples/components/cell.md - 单元格组件
    • examples/components/icon.md - 图标组件
    • examples/components/image.md - 图像组件
    • examples/components/popup.md - 弹出层组件
    • examples/components/toast.md - 提示组件
    • examples/components/dialog.md - 对话框组件
    • examples/components/form.md - 表单组件
    • examples/components/field.md - 字段组件
    • examples/components/picker.md - 选择器组件
    • examples/components/calendar.md - 日历组件
    • examples/components/tabs.md - 标签页组件
    • examples/components/tabbar.md - 标签栏组件
    • examples/components/navbar.md - 导航栏组件
    • examples/components/list.md - 列表组件
    • examples/components/grid.md - 网格组件
    • examples/components/card.md - 卡片组件
    • examples/components/badge.md - 徽章组件
    • examples/components/loading.md - 加载组件
    • examples/components/action-sheet.md - ActionSheet 组件

    高级 - examples/advanced/：

    • examples/advanced/theme-customization.md - 自定义 Vant 主题
    • examples/advanced/internationalization.md - 国际化设置
    • examples/advanced/typescript.md - TypeScript 支持

  3. 遵循该示例文件中的具体指示，用于语法、结构和最佳实践

    重要说明：

    • 所有示例遵循 Vant Vue 3.0 API
    • 示例使用 Composition API 语法
    • 每个示例文件包括关键概念、代码示例和要点
    • 始终检查示例文件以了解最佳实践和常见模式
    • Vant 针对移动设备优化

  4. 需要时参考 api/ 目录中的 API 文档：

    • api/components.md - 组件 API 参考
    • api/config-provider.md - ConfigProvider API
    • api/hooks.md - 组合钩子 API

  5. 使用 templates/ 目录中的模板：

    • templates/project-setup.md - 项目设置模板
    • templates/component-template.md - 组件用法模板

文档映射（与官方文档一一对应）

指南：

组件：

示例和模板

此技能包括详细示例，组织成匹配官方文档结构。所有示例都在 examples/ 目录中（见上文映射）。

使用示例：

  • 从用户请求中识别主题
  • 从上文映射中加载适当的示例文件
  • 遵循该文件中的指示、语法和最佳实践
  • 将代码示例适应您的具体用例

使用模板：

  • 参考 templates/ 目录中的模板以获取常见脚手架
  • 将模板适应您的具体需求和编码风格

API 参考

详细的 API 文档可在 api/ 目录中找到，组织成匹配官方 Vant Vue 3.0 API 文档结构：

组件 API (api/components.md)

  • 所有组件属性和 API
  • 组件事件和插槽
  • 组件类型和接口

ConfigProvider API (api/config-provider.md)

  • ConfigProvider 组件 API
  • 全局配置选项
  • 主题配置

钩子 API (api/hooks.md)

  • 组合钩子（useClickAway、useWindowSize 等）
  • 实用钩子

使用 API 参考：

  1. 识别您需要帮助的 API
  2. 从 api/ 目录加载相应的 API 文件
  3. 查找 API 签名、参数、返回类型和示例
  4. 参考链接的示例文件以了解详细用法模式
  5. 所有 API 文件包括到 examples/ 目录中相关示例文件的链接

最佳实践

  1. 导入 Vant CSS：在入口文件中导入 Vant CSS
  2. 使用 Composition API：对于 Vue 3 项目，优先使用 Composition API
  3. Tree-shaking：单独导入组件以改善 tree-shaking
  4. 移动优先：首先为移动设备设计
  5. 触摸交互：考虑触摸手势和交互
  6. 性能：为移动性能优化
  7. 主题定制：使用 CSS 变量以实现一致的主题
  8. 国际化：使用 ConfigProvider 与区域设置进行 i18n
  9. TypeScript：使用 TypeScript 以获得更好的类型安全
  10. 组件组合：组合组件以构建复杂 UI

资源

关键词

Vant, Vant Vue 3, 移动 UI, Vue 3, 组件, 按钮, 单元格, 表单, 对话框, 提示, 弹出层, 标签页, 标签栏, 导航栏, 主题, 定制, 国际化, i18n, TypeScript, 组件库