avue-form

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

次のような要望がある場合は、このスキルを使用してください。

• Vue プロジェクトに Avue-form をインストールしてセットアップする
• Vue アプリケーションで Avue-form コンポーネントを使用する
• フォームのオプションと列を設定する
• フォームのバリデーションを処理する
• フォームのイベントとメソッドを使用する
• フォームコンポーネントをカスタマイズする
• Avue-form の API とメソッドを理解する
• Avue-form の問題をトラブルシューティングする

このスキルの使用方法

このスキルは、Avue-form の公式ドキュメントの構成（https://avuejs.com/form/form-doc.html）に合わせて構成されています。Avue-form を使用する場合は、次の手順に従ってください。

1. ユーザーのリクエストからトピックを特定します。

   • Installation/安装 → examples/components/installation.md
   • Basic Usage/基础用法 → examples/components/basic-usage.md
   • Configuration/配置 → examples/components/configuration.md
   • Features/功能特性 → examples/features/
   • API/API 文档 → api/

2. examples/ ディレクトリから適切なサンプルファイルを読み込みます。

   コンポーネント（组件）：

   • examples/components/intro.md - Avue-form の概要
   • examples/components/installation.md - インストールガイド
   • examples/components/basic-usage.md - 基本的な使い方
   • examples/components/configuration.md - 設定
   • examples/components/options.md - フォームのオプション
   • examples/components/columns.md - フォームの列
   • examples/components/validation.md - フォームのバリデーション
   • examples/components/events.md - フォームのイベント
   • examples/components/methods.md - フォームのメソッド

   機能（功能特性）：

   • examples/features/dynamic-form.md - 動的フォーム
   • examples/features/form-layout.md - フォームのレイアウト
   • examples/features/form-rules.md - フォームのルール
   • examples/features/form-submit.md - フォームの送信
   • examples/features/form-reset.md - フォームのリセット
   • examples/features/custom-components.md - カスタムコンポーネント
   • examples/features/form-group.md - フォームグループ
   • examples/features/form-tabs.md - フォームのタブ

3. 構文、構成、ベストプラクティスについては、該当するサンプルファイルの具体的な指示に従います。

   重要な注意事項：

   • Avue-form は Vue をベースとしています
   • コンポーネントでは Vue の構文を使用します
   • サンプルには Options API と Composition API の両方が含まれています
   • 各サンプルファイルには、主要な概念、コード例、重要なポイントが含まれています

4. 必要に応じて、api/ ディレクトリにある API ドキュメントを参照します。

   • api/form-api.md - フォームコンポーネントの API
   • api/options-api.md - Options API
   • api/columns-api.md - Columns API
   • api/events-api.md - Events API
   • api/methods-api.md - Methods API

5. templates/ ディレクトリにあるテンプレートを使用します。

   • templates/installation.md - インストール用テンプレート
   • templates/basic-form.md - 基本的なフォームのテンプレート
   • templates/configuration.md - 設定用テンプレート

1. Avue-form を理解する

Avue-form は、豊富なフォームコントロールと設定オプションを提供する Vue フォームコンポーネントライブラリです。

主な概念：

• フォームコンポーネント：メインのフォームコンポーネント
• オプション：フォームの設定オプション
• 列：フォームフィールドの定義
• バリデーション：フォームのバリデーションルール
• イベント：フォームのイベント
• メソッド：フォームのメソッド

2. インストール

npm を使用する場合：

npm install @avue/form

yarn を使用する場合：

yarn add @avue/form

pnpm を使用する場合：

pnpm add @avue/form

3. 基本的なセットアップ

// main.js
import Vue from 'vue'
import Avue from '@avue/form'
import '@avue/form/lib/theme-default/index.css'

Vue.use(Avue)

<template>
  <avue-form :option="option" v-model="form"></avue-form>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      option: {
        column: [
          {
            label: 'Name',
            prop: 'name',
            type: 'input'
          }
        ]
      }
    }
  }
}
</script>

ドキュメントの対応関係（公式ドキュメントとの一対一対応）

• examples/ → https://avuejs.com/form/form-doc.html

サンプルとテンプレート

このスキルには、公式ドキュメントの構成に合わせて整理された詳細なサンプルが含まれています。すべてのサンプルは examples/ ディレクトリにあります（上記の対応関係を参照）。

サンプルを使用するには：

• ユーザーのリクエストからトピックを特定します
• 上記の対応関係から適切なサンプルファイルを読み込みます
• そのファイルに記載された指示、構文、ベストプラクティスに従います
• コード例を具体的なユースケースに合わせて調整します

テンプレートを使用するには：

• よく使われるひな形については、templates/ ディレクトリのテンプレートを参照します
• テンプレートをニーズやコーディングスタイルに合わせて調整します

API リファレンス

詳細な API ドキュメントは api/ ディレクトリにあり、公式の Avue-form API ドキュメントの構成に合わせて整理されています。

フォームコンポーネント API（api/form-api.md）

• フォームコンポーネントのプロパティ
• フォームコンポーネントのイベント
• フォームコンポーネントのスロット

オプション API（api/options-api.md）

• フォームオプションの設定
• オプションのプロパティ
• オプションのメソッド

カラム API（api/columns-api.md）

• カラムの定義
• カラムのプロパティ
• カラムの種類

イベント API（api/events-api.md）

• フォームイベント
• イベントハンドラー
• イベントパラメーター

メソッド API（api/methods-api.md）

• フォームメソッド
• メソッドのパラメーター
• メソッドの戻り値

API リファレンスの使用方法：

1. 必要な API を特定します
2. api/ ディレクトリから対応する API ファイルを読み込みます
3. API のシグネチャ、パラメーター、戻り値の型、使用例を確認します
4. 詳細な使用パターンについては、リンクされているサンプルファイルを参照します
5. すべての API ファイルには、examples/ ディレクトリ内の関連するサンプルファイルへのリンクが含まれています

ベストプラクティス

1. オプションを適切に設定する：フォームオプションを正しく設定します
2. カラムを明確に定義する：適切な型を指定してフォームのカラムを定義します
3. バリデーションを処理する：バリデーションルールを適切に使用します
4. イベントを処理する：操作にはフォームイベントを使用します
5. メソッドを使用する：操作にはフォームメソッドを活用します
6. コンポーネントをカスタマイズする：必要に応じてコンポーネントをカスタマイズします
7. Vue のパターンに従う：Vue.js のベストプラクティスに従います

リソース

• 公式ドキュメント：https://avuejs.com/form/form-doc.html
• GitHub リポジトリ：https://github.com/avue/avue

キーワード

Avue-form, avue-form, @avue/form, Vue フォーム, フォームコンポーネント, フォームコンポーネント, フォーム設定, フォームバリデーション, フォームイベント, フォームメソッド, フォームオプション, フォームカラム, フォームバリデーション, フォームイベント, フォームメソッド, 動的フォーム, フォームレイアウト, フォームルール, フォーム送信, フォームリセット, カスタムコンポーネント, フォームグループ, フォームタブ