触发词包括：

• 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. 组件实现

   • 按钮
   • 单元格
   • 表单
   • 对话框
   • 轻提示
   • 弹出层

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 风格
• 当用户询问全局主题或类似应用范围的配置时，提及 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, 移动端组件库, 按钮, 单元格, 表单, 对话框, 提示, 弹出层, 主题定制

每周安装量

103

仓库

teachingai/full…k-skills

GitHub Stars

223

首次出现

2026 年 1 月 24 日

安全审计

Gen Agent Trust HubPassSocketPassSnykPass

安装于

opencode91

codex88

gemini-cli87

github-copilot86

cursor79

amp77