avue

このスキルを使用するタイミング

ユーザーが次のことを求めている場合は、このスキルを使用してください。

• Avue で管理システムを構築する
• Avue のテーブルおよびフォームコンポーネントを使用する
• データ駆動型ビューを実装する
• Avue のグローバル API（$DialogForm、$Clipboard、$ImagePreview など）を使用する
• Avue のフォームとテーブルを設定する
• Avue のコンポーネント（Tree、Upload、Select など）を使用する
• Avue で CRUD 操作を実装する
• Avue のコンポーネントをカスタマイズする
• 国際化を設定する
• Avue のプラグインと拡張機能を使用する

このスキルの使用方法

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

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

   • Getting started/快速开始 → examples/getting-started/installation.md または examples/getting-started/quick-start.md
   • Form/表单 → examples/forms/basic-form.md または examples/forms/form-config.md
   • Table/表格 → examples/components/table.md
   • Tree/树形 → examples/components/tree.md
   • Upload/上传 → examples/components/upload.md
   • Global API/全局 API → api/global-api.md

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

   Getting Started (快速开始) - examples/getting-started/:

   • examples/getting-started/installation.md - Avue のインストールと基本設定
   • examples/getting-started/quick-start.md - クイックスタートチュートリアル
   • examples/getting-started/global-config.md - グローバル設定

   Forms (表单) - examples/forms/:

   • examples/forms/basic-form.md - フォームの基本的な使用方法
   • examples/forms/form-config.md - フォームの設定
   • examples/forms/form-validation.md - フォームのバリデーション
   • examples/forms/form-table.md - テーブルセレクター付きフォーム

   Components (组件) - examples/components/:

   • examples/components/table.md - テーブルコンポーネント
   • examples/components/tree.md - ツリーコンポーネント
   • examples/components/upload.md - アップロードコンポーネント
   • examples/components/select.md - セレクトコンポーネント
   • examples/components/input.md - 入力コンポーネント

   Advanced (高级) - examples/advanced/:

   • examples/advanced/crud.md - CRUD 操作
   • examples/advanced/internationalization.md - 国際化
   • examples/advanced/plugins.md - プラグインと拡張機能

3. 構文、構造、ベストプラクティスについては、そのサンプルファイルの具体的な手順に従ってください。

   重要な注意事項:

   • すべてのサンプルは Avue API に準拠しています
   • サンプルでは Vue 2.x の構文を使用しています
   • 各サンプルファイルには、主要な概念、コード例、重要なポイントが含まれています
   • ベストプラクティスや一般的なパターンについては、必ずサンプルファイルを確認してください
   • Avue は Vue と Element UI をベースにしています

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

   • api/global-api.md - グローバル API リファレンス
   • api/components.md - コンポーネント API リファレンス

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

   • templates/form-template.md - フォームテンプレート
   • templates/table-template.md - テーブルテンプレート
   • templates/crud-template.md - CRUD テンプレート

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

• サンプルと API ファイルを参照 → https://avuejs.com

サンプルとテンプレート

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

サンプルの使用方法:

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

テンプレートの使用方法:

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

API リファレンス

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

グローバル API (api/global-api.md)

• $DialogForm - ダイアログフォーム
• $Clipboard - クリップボード操作
• $ImagePreview - 画像プレビュー
• $Print - 印刷機能
• $Export - エクスポート機能
• $Log - ログ出力
• findObject, findArray, findNode - ユーティリティ関数
• watermark - ウォーターマーク
• downFile - ファイルダウンロード
• randomId - ランダム ID 生成
• loadScript - スクリプト読み込み
• deepClone - ディープクローン
• setPx - ピクセル変換
• validatenull - バリデーション
• vaildData - データバリデーション

コンポーネント API (api/components.md)

• コンポーネントの props と API
• コンポーネントのイベントとメソッド
• コンポーネントの設定

API リファレンスを使用するには:

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

ベストプラクティス

1. Avue のインストール: @smallwei/avue パッケージをインストールします
2. スタイルのインポート: Avue の CSS スタイルをインポートします
3. Vue.use() の使用: Vue.use(Avue) で Avue を登録します
4. データ駆動: フォームとテーブルにはデータ駆動アプローチを使用します
5. 設定: オプションオブジェクトを介してフォームとテーブルを設定します
6. グローバル API: 一般的な操作には Avue のグローバル API を使用します
7. 国際化: 多言語サポートのために i18n を設定します
8. プラグイン: 拡張機能のために Avue プラグインを使用します
9. コンポーネントの構成: 複雑な UI のためにコンポーネントを組み合わせます
10. パフォーマンス: 大規模なデータセットに対してパフォーマンスを最適化します

リソース

• 公式サイト: https://avuejs.com/
• GitHub リポジトリ: https://github.com/avue/avue

キーワード

Avue, Vue, Element UI, data-driven, form, table, CRUD, $DialogForm, $Clipboard, $ImagePreview, $Print, $Export, tree, upload, select, 数据驱动, 表单, 表格, CRUD, 树形, 上传, 选择器