avue

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

ユーザーが次のことを希望する場合は、いつでもこのスキルを使用します。

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

このスキルの使い方

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

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

   • はじめに／快速开始 → examples/getting-started/installation.md または examples/getting-started/quick-start.md
   • フォーム／表单 → examples/forms/basic-form.md または examples/forms/form-config.md
   • テーブル／表格 → examples/components/table.md
   • ツリー／树形 → examples/components/tree.md
   • アップロード／上传 → examples/components/upload.md
   • グローバル API／全局 API → api/global-api.md

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

   はじめに（快速开始）- examples/getting-started/：

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

   フォーム（表单）- examples/forms/：

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

   コンポーネント（组件）- examples/components/：

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

   応用編（高级）- 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, 树形, 上传, 选择器