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. ユーザーのリクエストからトピックを特定します。

   • インストール／安装 → examples/components/installation.md
   • 基本的な使い方／基础用法 → examples/components/basic-usage.md
   • 設定／配置 → examples/components/configuration.md
   • 機能／功能特性 → 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 - オプションの API
   • api/columns-api.md - 列の API
   • api/events-api.md - イベントの API
   • api/methods-api.md - メソッドの API

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

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

1. Avue-form を理解する

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

主な概念：

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

2. インストール

npm を使用する場合：

npm install @smallwei/avue

yarn を使用する場合：

yarn add @smallwei/avue

pnpm を使用する場合：

pnpm add @smallwei/avue

3. 基本設定

// main.js
import Vue from 'vue'
import Avue from '@smallwei/avue'
import '@smallwei/avue/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>

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

• 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 フォーム, フォームコンポーネント, フォームコンポーネント, フォーム設定, フォームバリデーション, フォームイベント, フォームメソッド, フォームオプション, フォームカラム, フォームバリデーション, フォームイベント, フォームメソッド, 動的フォーム, フォームレイアウト, フォームルール, フォーム送信, フォームリセット, カスタムコンポーネント, フォームグループ, フォームタブ