vant-vue3

Vant of Vue 3

このスキルを使用する場面

ユーザーが Vant for Vue 3 を使用している場合、または次のことを尋ねている場合は、このスキルを使用してください。

• Vant のインストール、セットアップ、またはプロジェクトの初期化
• vant を使用した Vue 3 のモバイル UI 実装
• van-button、van-cell、van-form、van-dialog、van-popup、van-toast
• Vant の ConfigProvider、テーマ変数、またはテーマのカスタマイズ
• モバイルファーストのページ構成、タッチ操作を意識した UI、または Vant を使ったフォームのフロー
• 汎用的な 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 の確認

   • 共通の props
   • コンポーネントの props／イベント／メソッド
   • グローバル設定 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

ユーザーが prop 名、イベント名、メソッド名、または簡潔な API の概要を必要としている場合に使用してください。

E. 公式ドキュメントの案内と対象範囲の確認

• references/official-mapping.md

次の場合にこのファイルを使用してください。

• このスキルがローカルで扱う内容を確認する必要がある場合
• 公式 Vant セクションからローカルファイルへユーザーを案内する必要がある場合
• まだローカルのサンプルで扱われていない Vant コンポーネントに対応する必要がある場合

ステップ 3：回答のワークフローに従う

このスキルを使って回答する場合：

1. 対象が別の Vue UI ライブラリではなく、Vue 3 用の Vant であることを確認します。
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/ の該当ファイル
• props やイベントが関係する場合は api/components.md

以下の順に返します。

• まず最小限のサンプル
• 次に props、イベント、メソッドに関する説明
• 関連する場合は、最後に使用時の注意点

テーマのカスタマイズを尋ねられた場合

以下を読み込みます。

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

以下を返します。

• ConfigProvider の使用方法
• theme-vars のサンプル
• CSS 変数の方針
• スコープと継承に関する注意点

ローカルで扱っていない Vant コンポーネントを尋ねられた場合

以下を読み込みます。

• references/official-mapping.md
• 最も近いローカルファイル

以下を返します。

• このローカルスキルには、そのコンポーネント専用のサンプルファイルがないことを明示します
• 公式 Vant ガイドの該当セクションを案内します
• このスキルで使用している規約に沿った Vant のサンプルを提示します

品質チェックリスト

回答する前に、以下を確認します。

• 回答が Vue 3 用の Vant に特化している
• 参照するすべてのローカルファイルが存在する
• インポート元が 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 Vue 3、モバイル向けコンポーネントライブラリ、ボタン、セル、フォーム、ダイアログ、通知、ポップアップ、テーマのカスタマイズ