Back to Details

vant-vue3

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

When to use this skill

何时使用本技能

Use this skill whenever the user wants to:
  • Build mobile Vue 3 applications with Vant components
  • Use Vant UI components (Button, Cell, Form, Dialog, Toast, etc.)
  • Create mobile-friendly interfaces
  • Customize Vant theme
  • Implement internationalization with Vant
  • Use Vant with TypeScript
  • Handle mobile gestures and interactions
  • Implement mobile navigation patterns
  • Use mobile form components
  • Create mobile data display components
当用户有以下需求时，可使用本技能：
  • 使用Vant组件构建Vue 3移动端应用
  • 使用Vant UI组件（Button、Cell、Form、Dialog、Toast等）
  • 创建适配移动端的界面
  • 自定义Vant主题
  • 基于Vant实现国际化
  • 在Vant中使用TypeScript
  • 处理移动端手势与交互
  • 实现移动端导航模式
  • 使用移动端表单组件
  • 创建移动端数据展示组件

How to use this skill

如何使用本技能

This skill is organized to match the Vant Vue 3.0 official documentation structure (https://vant-ui.github.io/vant/#/zh-CN). When working with Vant:
  1. Identify the topic from the user's request:
    • Getting started/快速开始 → 
      examples/getting-started/installation.md
      or 
      examples/getting-started/basic-usage.md
    • Button/按钮 → 
      examples/components/button.md
    • Cell/单元格 → 
      examples/components/cell.md
    • Form/表单 → 
      examples/components/form.md
    • Dialog/对话框 → 
      examples/components/dialog.md
    • Toast/提示 → 
      examples/components/toast.md
    • Popup/弹出层 → 
      examples/components/popup.md
    • Theme/主题 → 
      examples/advanced/theme-customization.md
  2. Load the appropriate example file from the 
    examples/
    directory:
    Getting Started (快速开始) - 
    examples/getting-started/
    :
    • examples/getting-started/installation.md
      - Installing Vant and basic setup
    • examples/getting-started/basic-usage.md
      - Basic component usage
    Components (组件) - 
    examples/components/
    :
    • examples/components/button.md
      - Button component
    • examples/components/cell.md
      - Cell component
    • examples/components/icon.md
      - Icon component
    • examples/components/image.md
      - Image component
    • examples/components/popup.md
      - Popup component
    • examples/components/toast.md
      - Toast component
    • examples/components/dialog.md
      - Dialog component
    • examples/components/form.md
      - Form component
    • examples/components/field.md
      - Field component
    • examples/components/picker.md
      - Picker component
    • examples/components/calendar.md
      - Calendar component
    • examples/components/tabs.md
      - Tabs component
    • examples/components/tabbar.md
      - Tabbar component
    • examples/components/navbar.md
      - Navbar component
    • examples/components/list.md
      - List component
    • examples/components/grid.md
      - Grid component
    • examples/components/card.md
      - Card component
    • examples/components/badge.md
      - Badge component
    • examples/components/loading.md
      - Loading component
    • examples/components/action-sheet.md
      - ActionSheet component
    Advanced (高级) - 
    examples/advanced/
    :
    • examples/advanced/theme-customization.md
      - Customizing Vant theme
    • examples/advanced/internationalization.md
      - Internationalization setup
    • examples/advanced/typescript.md
      - TypeScript support
  3. Follow the specific instructions in that example file for syntax, structure, and best practices
    Important Notes:
    • All examples follow Vant Vue 3.0 API
    • Examples use Composition API syntax
    • Each example file includes key concepts, code examples, and key points
    • Always check the example file for best practices and common patterns
    • Vant is optimized for mobile devices
  4. Reference API documentation in the 
    api/
    directory when needed:
    • api/components.md
      - Component API reference
    • api/config-provider.md
      - ConfigProvider API
    • api/hooks.md
      - Composition Hooks API
  5. Use templates from the 
    templates/
    directory:
    • templates/project-setup.md
      - Project setup templates
    • templates/component-template.md
      - Component usage templates
本技能的结构与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
    • Button/按钮 → 
      examples/components/button.md
    • Cell/单元格 → 
      examples/components/cell.md
    • Form/表单 → 
      examples/components/form.md
    • Dialog/对话框 → 
      examples/components/dialog.md
    • Toast/提示 → 
      examples/components/toast.md
    • Popup/弹出层 → 
      examples/components/popup.md
    • Theme/主题 → 
      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
      - Button组件
    • examples/components/cell.md
      - Cell组件
    • examples/components/icon.md
      - Icon组件
    • examples/components/image.md
      - Image组件
    • examples/components/popup.md
      - Popup组件
    • examples/components/toast.md
      - Toast组件
    • examples/components/dialog.md
      - Dialog组件
    • examples/components/form.md
      - Form组件
    • examples/components/field.md
      - Field组件
    • examples/components/picker.md
      - Picker组件
    • examples/components/calendar.md
      - Calendar组件
    • examples/components/tabs.md
      - Tabs组件
    • examples/components/tabbar.md
      - Tabbar组件
    • examples/components/navbar.md
      - Navbar组件
    • examples/components/list.md
      - List组件
    • examples/components/grid.md
      - Grid组件
    • examples/components/card.md
      - Card组件
    • examples/components/badge.md
      - Badge组件
    • examples/components/loading.md
      - Loading组件
    • 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
      - 组合式Hooks API
  5. 使用
    templates/
    目录下的模板    :
    • templates/project-setup.md
      - 项目搭建模板
    • templates/component-template.md
      - 组件使用模板

Doc mapping (one-to-one with official documentation)

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

Guide (指南):
Components (组件):
指南:
组件:

Examples and Templates

示例与模板

This skill includes detailed examples organized to match the official documentation structure. All examples are in the 
examples/
directory (see mapping above).
To use examples:
  • Identify the topic from the user's request
  • Load the appropriate example file from the mapping above
  • Follow the instructions, syntax, and best practices in that file
  • Adapt the code examples to your specific use case
To use templates:
  • Reference templates in 
    templates/
    directory for common scaffolding
  • Adapt templates to your specific needs and coding style
本技能包含与官方文档结构匹配的详细示例，所有示例均位于
examples/
目录下（详见上述映射）。
使用示例：
  • 从用户需求中确定主题
  • 根据上述映射加载对应的示例文件
  • 遵循文件中的语法、结构及最佳实践说明
  • 根据具体使用场景调整代码示例
使用模板：
  • 参考
    templates/
    目录下的模板进行通用脚手架搭建
  • 根据具体需求和编码风格调整模板

API Reference

API参考

Detailed API documentation is available in the 
api/
directory, organized to match the official Vant Vue 3.0 API documentation structure:
详细的API文档位于
api/
目录下，结构与Vant Vue 3.0官方API文档保持一致：

Components API (
api/components.md
)

组件API（
api/components.md
）

  • All component props and APIs
  • Component events and slots
  • Component types and interfaces
  • 所有组件的属性与API
  • 组件事件与插槽
  • 组件类型与接口

ConfigProvider API (
api/config-provider.md
)

ConfigProvider API（
api/config-provider.md
）

  • ConfigProvider component API
  • Global configuration options
  • Theme configuration
  • ConfigProvider组件API
  • 全局配置选项
  • 主题配置

Hooks API (
api/hooks.md
)

Hooks API（
api/hooks.md
）

  • Composition hooks (useClickAway, useWindowSize, etc.)
  • Utility hooks
To use API reference:
  1. Identify the API you need help with
  2. Load the corresponding API file from the 
    api/
    directory
  3. Find the API signature, parameters, return type, and examples
  4. Reference the linked example files for detailed usage patterns
  5. All API files include links to relevant example files in the 
    examples/
    directory
  • 组合式Hooks（useClickAway、useWindowSize等）
  • 工具类Hooks
使用API参考：
  1. 确定所需的API
  2. 从
    api/
    目录加载对应的API文件
  3. 查找API签名、参数、返回类型及示例
  4. 参考关联的示例文件获取详细使用模式
  5. 所有API文件均包含指向
    examples/
    目录中相关示例文件的链接

Best Practices

最佳实践

  1. Import Vant CSS: Import Vant CSS in your entry file
  2. Use Composition API: Prefer Composition API for Vue 3 projects
  3. Tree-shaking: Import components individually for better tree-shaking
  4. Mobile-first: Design for mobile devices first
  5. Touch interactions: Consider touch gestures and interactions
  6. Performance: Optimize for mobile performance
  7. Theme customization: Use CSS variables for consistent theming
  8. Internationalization: Use ConfigProvider with locale for i18n
  9. TypeScript: Use TypeScript for better type safety
  10. Component composition: Compose components for complex UIs
  1. 导入Vant CSS：在入口文件中导入Vant CSS
  2. 使用Composition API：Vue 3项目优先使用Composition API
  3. Tree-shaking：按需导入组件以实现更优的Tree-shaking效果
  4. 移动端优先：优先针对移动设备进行设计
  5. 触摸交互：考虑触摸手势与交互体验
  6. 性能优化：针对移动端性能进行优化
  7. 主题定制：使用CSS变量实现统一主题
  8. 国际化：结合ConfigProvider与locale实现国际化
  9. TypeScript：使用TypeScript提升类型安全性
  10. 组件组合：通过组件组合构建复杂UI

Resources

资源

Keywords

关键词

Vant, Vant Vue 3, mobile UI, Vue 3, components, Button, Cell, Form, Dialog, Toast, Popup, Tabs, Tabbar, Navbar, theme, customization, internationalization, i18n, TypeScript, 组件库, 按钮, 单元格, 表单, 对话框, 提示, 弹出层, 标签页, 标签栏, 导航栏, 主题定制, 国际化
Vant, Vant Vue 3, mobile UI, Vue 3, components, Button, Cell, Form, Dialog, Toast, Popup, Tabs, Tabbar, Navbar, theme, customization, internationalization, i18n, TypeScript, 组件库, 按钮, 单元格, 表单, 对话框, 提示, 弹出层, 标签页, 标签栏, 导航栏, 主题定制, 国际化