vant-vue3

Vue 3 的 Vant

何时使用此技能

当用户正在使用 Vant for Vue 3 或询问以下内容时，请使用此技能：

• Vant 的安装、设置或项目初始化
• 使用 vant 实现 Vue 3 移动端 UI
• van-button、van-cell、van-form、van-dialog、van-popup、van-toast
• Vant ConfigProvider、主题变量或主题定制
• 基于 Vant 的移动端优先页面结构、触控式 UI 或表单流程
• 将通用 Vue 3 UI 转换为 Vant 组件用法
• 审查或修复现有的 Vant Vue 3 代码

触发词包括：

• vant
• vant vue3
• Vant of Vue 3.0
• van-button、van-form、van-cell、van-dialog、van-toast、van-popup
• ConfigProvider
• theme-vars
• vant 组件
• Vant 主题定制

范围与对应关系

此技能与 Vant 官方文档入口保持一致：

• 官方网站：https://vant-ui.github.io/
• 官方指南：https://vant-ui.github.io/vant/#/zh-CN

本地技能内容仅涵盖此技能目录中实际存在的文件。不要引用不存在的本地文件。如果用户请求的 Vant 组件没有对应的本地示例文件，请优先参考官方指南，并复用最接近的本地模式。

如需了解本地文件与官方文档的精确对应关系，请阅读：

• references/official-mapping.md

如何使用此技能

步骤 1：确定请求类别

将用户请求归入以下类别之一：

1. 快速开始 / 设置

   • 安装 Vant
   • 引入样式
   • 完整引入与按需引入
   • Vue 3 项目初始化

2. 组件实现

   • Button
   • Cell
   • Form
   • Dialog
   • Toast
   • Popup

3. 全局配置与主题

   • ConfigProvider
   • theme-vars
   • 主题定制

4. API 查询

   • 常用属性
   • 组件属性 / 事件 / 方法
   • 全局配置 API

5. 模板或脚手架

   • 项目设置模板
   • 可复用的组件结构

步骤 2：仅加载匹配的文件

使用最少量的相关文件。

A. 快速开始 / 设置

• examples/getting-started/installation.md
• examples/getting-started/basic-usage.md
• templates/project-setup.md

用户询问如何安装 Vant、注册组件、引入 CSS 或启动 Vue 3 + Vant 项目时，请使用这些文件。

B. 有示例覆盖的组件

仅使用与用户请求匹配的组件文件：

• Button → examples/components/button.md
• Cell → examples/components/cell.md
• Form → examples/components/form.md
• Dialog → examples/components/dialog.md
• Popup → examples/components/popup.md
• Toast → examples/components/toast.md

C. 全局配置与主题

• api/config-provider.md
• examples/advanced/theme-customization.md

有关 ConfigProvider、深色 / 浅色主题处理、theme-vars、CSS 变量或全局 UI 行为的问题，请使用这些文件。

D. API 查询

• api/components.md
• api/config-provider.md

用户需要属性名称、事件名称、方法名称或 API 快速摘要时，请使用这些文件。

E. 官方文档导航与覆盖范围边界

• references/official-mapping.md

以下情况请使用此文件：

• 需要确认此技能在本地的覆盖范围
• 需要将用户从 Vant 官方文档章节引导至本地文件
• 需要处理本地示例尚未覆盖的 Vant 组件

步骤 3：遵循响应工作流

使用此技能回答时：

1. 确认目标是 Vant for Vue 3，而不是其他 Vue UI 库。
2. 选择匹配的本地示例或 API 文件。
3. 代码示例保持 Vue 3 Composition API 风格。
4. 遵循 Vant 的命名和用法约定：
   • 从 vant 导入
   • 在模板中使用 van- 组件
   • 在配置需要时导入 vant/lib/index.css
5. 优先采用移动优先的结构和面向触控的交互模式。
6. 如果本地未涵盖所请求的组件：
   • 说明本地技能不包含该组件的专用示例文件
   • 通过 references/official-mapping.md 导航
   • 以官方指南为主要依据
   • 采用最接近的本地示例风格，而不是虚构本地文件

本地导航地图

这是此技能实际提供的本地导航内容。

开始使用

• examples/getting-started/installation.md
• examples/getting-started/basic-usage.md
• templates/project-setup.md

本地涵盖的组件

• examples/components/button.md
• examples/components/cell.md
• examples/components/form.md
• examples/components/dialog.md
• examples/components/popup.md
• examples/components/toast.md

主题与全局配置

• api/config-provider.md
• examples/advanced/theme-customization.md

API 摘要

• api/components.md
• api/config-provider.md

官方映射

• references/official-mapping.md

工作规则

应该

• 仅使用确实存在的本地文件
• 确保回答以 Vant 官方指南结构为依据
• 优先提供具体的组件代码，而非抽象说明
• Vue 3 示例使用 script setup 风格，除非用户已采用其他风格
• 用户询问全局主题或类似 locale 的应用级配置时，提及 ConfigProvider
• 确保代码示例可运行且简明聚焦

不应该

• 不要引用 icon.md、tabs.md、navbar.md 或此技能中不存在的其他文件
• 不要声称此技能在本地完整涵盖了所有 Vant 组件
• 不要混用 Vant 与 Element Plus、Ant Design Vue 或其他 UI 库的模式
• 用户明确询问 Vant 时，不要给出通用的 Vue UI 建议

回答模式

如果用户询问配置

加载：

• examples/getting-started/installation.md
• templates/project-setup.md

返回：

• 安装命令
• CSS 导入
• 注册策略
• 最简 Vue 3 + Vant 起始示例

如果用户询问本地涵盖的组件

加载：

• examples/components/ 下匹配的文件
• 涉及属性／事件时加载 api/components.md

返回：

• 先给出最简示例
• 然后说明属性／事件／方法
• 最后说明相关的使用注意事项

如果用户询问主题自定义

加载：

• api/config-provider.md
• examples/advanced/theme-customization.md

返回：

• ConfigProvider 用法
• theme-vars 示例
• CSS 变量策略
• 作用域与继承说明

如果用户询问本地未涵盖的 Vant 组件

加载：

• references/official-mapping.md
• 最接近的本地文件

返回：

• 明确说明本地技能没有该组件的专用示例文件
• 指向 Vant 官方指南中的相应章节
• 提供遵循此技能相同约定的 Vant 风格示例

质量检查清单

回答前，请确认：

• 答案专门针对 Vant of Vue 3
• 所有引用的本地文件都确实存在
• 导入均来自 vant
• 示例使用 Vue 3 语法
• 配置示例在需要时包含 CSS 导入
• 主题相关回答始终一致地使用 ConfigProvider／theme-vars

资源

• 官方网站：https://vant-ui.github.io/
• 官方指南：https://vant-ui.github.io/vant/#/zh-CN
• 本地官方映射：references/official-mapping.md

关键词

Vant、Vant Vue 3、Vant of Vue 3.0、Vue 3 移动端 UI、van-button、van-cell、van-form、van-dialog、van-toast、van-popup、ConfigProvider、theme-vars、移动优先 UI、Vant 主题、Vant 安装、Vant 组件库、vant 组件、vant vue3、移动端组件库、按钮、单元格、表单、对话框、提示、弹出层、主题定制