vue3 について
vue3は、Vue 3を学ぶ人や開発者向けのリファレンススキルです。ガイドのトピックとAPI情報をローカルのサンプルファイルに対応付け、コンポーネント、リアクティビティ、TypeScript、ルーティング、テスト、パフォーマンスを扱います。
主な機能
- 01サンプルファイルからガイドを検索
- 02APIリファレンスのファイル対応
- 03コンポーネントとリアクティビティ
- 04TypeScriptとパフォーマンスの指針
活用シーン
- 01Vue 3の機能ガイドを探す
- 02特定APIの詳細を確認
- 03VueでTypeScriptのパターンを適用
- 04ルーティングやテストの項目を参照
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ partme-ai/ full-stack-skills --skill vue3インストール後、Claude Code で/vue3を入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
api/application.mdbuilt-in-components.mdbuilt-in-directives.mdbuilt-in-special-attributes.mdbuilt-in-special-elements.mdcompile-time-flags.mdcomponent-instance.mdcomposition-api-dependency-injection.mdcomposition-api-helpers.mdcomposition-api-lifecycle.mdcomposition-api-setup.mdcustom-elements.mdcustom-renderer.mdgeneral.mdoptions-composition.mdoptions-lifecycle.mdoptions-misc.mdoptions-rendering.mdoptions-state.mdreactivity-advanced.mdreactivity-core.mdreactivity-utilities.mdrender-function.mdapi/component/defineProps.mdapi/lifecycle/onMounted.mdapi/reactivity-core/computed.mdreactive.mdref.mdwatch.mdapi/reactivity-utilities/toRef.md詳細
このスキルを使用するタイミング
ユーザーが次のことを希望する場合は、いつでもこのスキルを使用してください。
- Vue 3 ガイドのトピックを学習または適用する(概要から高度な補足情報まで)
- Vue 3 のコンポーネント、リアクティビティ、テンプレート、ルーティングを実装する
- Vue 3 のベストプラクティス、TypeScript の使用方法、パフォーマンスに関するガイダンスに従う
- 特定の関数やオプションについて Vue 3 API リファレンスを確認する
このスキルの使用方法
- トピックを特定します。
examples/内にある該当するガイドの例ファイルを開きます。- API の詳細が必要な場合は、
api/内にある該当するファイルを開きます。 - 公式のガイダンスに従い、出力が Vue 3 のドキュメントと一貫するようにします。
ガイドの対応表(ガイドページと1対1で対応)
はじめに
examples/getting-started/introduction.md→ https://cn.vuejs.org/guide/introduction.htmlexamples/getting-started/quick-start.md→ https://cn.vuejs.org/guide/quick-start.html
基本事項
examples/essentials/application.md→ https://cn.vuejs.org/guide/essentials/application.htmlexamples/essentials/template-syntax.md→ https://cn.vuejs.org/guide/essentials/template-syntax.htmlexamples/essentials/reactivity-fundamentals.md→ https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.htmlexamples/essentials/computed.md→ https://cn.vuejs.org/guide/essentials/computed.htmlexamples/essentials/class-and-style.md→ https://cn.vuejs.org/guide/essentials/class-and-style.htmlexamples/essentials/conditional.md→ https://cn.vuejs.org/guide/essentials/conditional.htmlexamples/essentials/list.md→ https://cn.vuejs.org/guide/essentials/list.htmlexamples/essentials/event-handling.md→ https://cn.vuejs.org/guide/essentials/event-handling.htmlexamples/essentials/forms.md→ https://cn.vuejs.org/guide/essentials/forms.htmlexamples/essentials/watchers.md→ https://cn.vuejs.org/guide/essentials/watchers.htmlexamples/essentials/template-refs.md→ https://cn.vuejs.org/guide/essentials/template-refs.htmlexamples/essentials/component-basics.md→ https://cn.vuejs.org/guide/essentials/component-basics.htmlexamples/essentials/lifecycle.md→ https://cn.vuejs.org/guide/essentials/lifecycle.html
コンポーネントの詳細
examples/components/registration.md→ https://cn.vuejs.org/guide/components/registration.htmlexamples/components/props.md→ https://cn.vuejs.org/guide/components/props.htmlexamples/components/events.md→ https://cn.vuejs.org/guide/components/events.htmlexamples/components/v-model.md→ https://cn.vuejs.org/guide/components/v-model.htmlexamples/components/attrs.md→ https://cn.vuejs.org/guide/components/attrs.htmlexamples/components/slots.md→ https://cn.vuejs.org/guide/components/slots.htmlexamples/components/provide-inject.md→ https://cn.vuejs.org/guide/components/provide-inject.htmlexamples/components/async.md→ https://cn.vuejs.org/guide/components/async.html
再利用性
examples/reusability/composables.md→ https://cn.vuejs.org/guide/reusability/composables.htmlexamples/reusability/custom-directives.md→ https://cn.vuejs.org/guide/reusability/custom-directives.htmlexamples/reusability/plugins.md→ https://cn.vuejs.org/guide/reusability/plugins.html
組み込みコンポーネント
examples/built-ins/transition.md→ https://cn.vuejs.org/guide/built-ins/transition.htmlexamples/built-ins/transition-group.md→ https://cn.vuejs.org/guide/built-ins/transition-group.htmlexamples/built-ins/keep-alive.md→ https://cn.vuejs.org/guide/built-ins/keep-alive.htmlexamples/built-ins/teleport.md→ https://cn.vuejs.org/guide/built-ins/teleport.htmlexamples/built-ins/suspense.md→ https://cn.vuejs.org/guide/built-ins/suspense.html Scaling Upexamples/scaling-up/sfc.md→ https://cn.vuejs.org/guide/scaling-up/sfc.htmlexamples/scaling-up/tooling.md→ https://cn.vuejs.org/guide/scaling-up/tooling.htmlexamples/scaling-up/routing.md→ https://cn.vuejs.org/guide/scaling-up/routing.htmlexamples/scaling-up/state-management.md→ https://cn.vuejs.org/guide/scaling-up/state-management.htmlexamples/scaling-up/testing.md→ https://cn.vuejs.org/guide/scaling-up/testing.htmlexamples/scaling-up/ssr.md→ https://cn.vuejs.org/guide/scaling-up/ssr.html
Best Practices
examples/best-practices/production-deployment.md→ https://cn.vuejs.org/guide/best-practices/production-deployment.htmlexamples/best-practices/performance.md→ https://cn.vuejs.org/guide/best-practices/performance.htmlexamples/best-practices/accessibility.md→ https://cn.vuejs.org/guide/best-practices/accessibility.htmlexamples/best-practices/security.md→ https://cn.vuejs.org/guide/best-practices/security.html
TypeScript
examples/typescript/overview.md→ https://cn.vuejs.org/guide/typescript/overview.htmlexamples/typescript/composition-api.md→ https://cn.vuejs.org/guide/typescript/composition-api.htmlexamples/typescript/options-api.md→ https://cn.vuejs.org/guide/typescript/options-api.html
Extra Topics
examples/extras/ways-of-using-vue.md→ https://cn.vuejs.org/guide/extras/ways-of-using-vue.htmlexamples/extras/composition-api-faq.md→ https://cn.vuejs.org/guide/extras/composition-api-faq.htmlexamples/extras/reactivity-in-depth.md→ https://cn.vuejs.org/guide/extras/reactivity-in-depth.htmlexamples/extras/rendering-mechanism.md→ https://cn.vuejs.org/guide/extras/rendering-mechanism.htmlexamples/extras/render-function.md→ https://cn.vuejs.org/guide/extras/render-function.htmlexamples/extras/web-components.md→ https://cn.vuejs.org/guide/extras/web-components.htmlexamples/extras/animation.md→ https://cn.vuejs.org/guide/extras/animation.html
API マッピング(API ページと1対1で対応)
グローバル API
api/application.md→ https://cn.vuejs.org/api/application.htmlapi/general.md→ https://cn.vuejs.org/api/general.html
Composition API
api/composition-api-setup.md→ https://cn.vuejs.org/api/composition-api-setup.htmlapi/reactivity-core.md→ https://cn.vuejs.org/api/reactivity-core.htmlapi/reactivity-utilities.md→ https://cn.vuejs.org/api/reactivity-utilities.htmlapi/reactivity-advanced.md→ https://cn.vuejs.org/api/reactivity-advanced.htmlapi/composition-api-lifecycle.md→ https://cn.vuejs.org/api/composition-api-lifecycle.htmlapi/composition-api-dependency-injection.md→ https://cn.vuejs.org/api/composition-api-dependency-injection.htmlapi/composition-api-helpers.md→ https://cn.vuejs.org/api/composition-api-helpers.html
Options API
api/options-state.md→ https://cn.vuejs.org/api/options-state.htmlapi/options-rendering.md→ https://cn.vuejs.org/api/options-rendering.htmlapi/options-lifecycle.md→ https://cn.vuejs.org/api/options-lifecycle.htmlapi/options-composition.md→ https://cn.vuejs.org/api/options-composition.htmlapi/options-misc.md→ https://cn.vuejs.org/api/options-misc.htmlapi/component-instance.md→ https://cn.vuejs.org/api/component-instance.html
組み込み機能
api/built-in-directives.md→ https://cn.vuejs.org/api/built-in-directives.htmlapi/built-in-components.md→ https://cn.vuejs.org/api/built-in-components.htmlapi/built-in-special-elements.md→ https://cn.vuejs.org/api/built-in-special-elements.htmlapi/built-in-special-attributes.md→ https://cn.vuejs.org/api/built-in-special-attributes.html
単一ファイルコンポーネント
api/sfc-spec.md→ https://cn.vuejs.org/api/sfc-spec.htmlapi/sfc-script-setup.md→ https://cn.vuejs.org/api/sfc-script-setup.htmlapi/sfc-css-features.md→ https://cn.vuejs.org/api/sfc-css-features.html
高度な API
api/custom-elements.md→ https://cn.vuejs.org/api/custom-elements.htmlapi/render-function.md→ https://cn.vuejs.org/api/render-function.htmlapi/ssr.md→ https://cn.vuejs.org/api/ssr.htmlapi/utility-types.md→ https://cn.vuejs.org/api/utility-types.htmlapi/custom-renderer.md→ https://cn.vuejs.org/api/custom-renderer.htmlapi/compile-time-flags.md→ https://cn.vuejs.org/api/compile-time-flags.html
リソース
キーワード
Vue 3、Vue.js、Composition API、Options API、リアクティビティ、テンプレート構文、コンポーネント、ディレクティブ、ライフサイクル、ルーティング、状態管理、TypeScript
コメント
Markdown 対応