mcpField
V
vue-options-api-best-practices

vue-options-api-best-practices

github.com/liangmiqwq開発139 回インストール2 日前に更新
リポジトリ

vue-options-api-best-practices について

Vue.js の Options API を使う開発者向けのスキルです。TypeScript の利用方法と、メソッドやライフサイクルで起きやすい問題を扱います。

主な機能

  1. 01コンポーネントとコンテキストの型付け
  2. 02イベントと複雑なプロパティの型付け
  3. 03算出プロパティの戻り値型の指針
  4. 04メソッドとライフサイクルの束縛問題
  5. 05ステートフルなメソッドのライフサイクル対応

活用シーン

  1. 01Options API コンポーネントへの型追加
  2. 02メソッドやフックの未束縛の調査
  3. 03インスタンス間でのデバウンス状態共有の回避

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/liangmiqwq/skills --skill vue-options-api-best-practices

インストール後、Claude Code で/vue-options-api-best-practicesを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

reference/
no-arrow-functions-in-lifecycle-hooks.md
no-arrow-functions-in-methods.md
stateful-methods-lifecycle.md
ts-options-api-arrow-functions-validators.md
ts-options-api-computed-return-types.md
ts-options-api-proptype-complex-types.md
ts-options-api-provide-inject-limitations.md
ts-options-api-type-event-handlers.md
ts-options-api-use-definecomponent.md
ts-strict-mode-options-api.md

詳細

Vue.js Options API のベストプラクティス、TypeScript との統合、よくある注意点。

TypeScript
メソッドとライフサイクル
  • メソッドがコンポーネントインスタンスのコンテキストにバインドされません → no-arrow-functions-in-methods を参照してください
  • ライフサイクルフックからコンポーネントデータにアクセスできなくなります → no-arrow-functions-in-lifecycle-hooks を参照してください
  • デバウンス関数がコンポーネントインスタンス間で状態を共有します → stateful-methods-lifecycle を参照してください

コメント

Markdown 対応