mcpField
V
vue-options-api-best-practices

vue-options-api-best-practices

github.com/vuejs-ai開発3.2k11.9k 回インストール5 日前に更新
リポジトリ

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

Vue.js の Options API に関する実践方法、TypeScript の型付け、よくある問題を扱うスキルです。Options API コンポーネントを書く開発者や保守する開発者を対象としています。

主な機能

  1. 01コンポーネントプロパティの型推論
  2. 02Options API の this の型安全性
  3. 03プロパティとイベントハンドラーの型付け
  4. 04算出プロパティの戻り値型
  5. 05メソッドとライフサイクルフックのバインド

活用シーン

  1. 01Options API コンポーネントへの TypeScript 型追加
  2. 02プロパティや注入値の型問題の調査
  3. 03メソッドやライフサイクルフックの誤ったバインド防止

インストール

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

$npx skills add https://github.com/vuejs-ai/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 対応