npx skills add https://github.com/hyf0/vue-skills --skill vue-best-practices将此技能作为指令集使用。请按顺序遵循此工作流,除非用户明确要求不同的顺序。
<script setup lang="ts">。vue-options-api-best-practices 技能(如果可用)。vue-jsx-best-practices 技能(如果可用)。references/reactivity.md广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
references/sfc.mdreferences/component-data-flow.mdreferences/composables.md在实现任何非平凡功能之前,创建一个简短的组件映射图。
components/<feature>/..., composables/use<Feature>.ts)。这些是基本的、必须了解的基础知识。在每一个 Vue 任务中都要应用所有这些知识,使用已在章节 1.1 中加载的核心参考资料。
1.1 的必读参考资料:reactivityref/reactive),尽可能使用 computed 派生其他状态。1.1 的必读参考资料:sfc<script> → <template> → <style>。v-html、列表渲染、条件渲染选择)。当一个组件具有超过一个明确的职责时(例如,数据编排 + UI,或多个独立的 UI 部分),请拆分它。
useXxx())。应用客观的拆分触发条件。如果任何条件为真,则拆分组件:
入口/根和路由视图规则:
1.1 的必读参考资料:component-data-flowv-model。defineProps、defineEmits 和 InjectionKey 保持契约显式化和类型化。1.1 的必读参考资料:composables不要默认添加这些功能。仅在需求存在时加载相应的参考资料。
<KeepAlive>: 用于有状态视图缓存 -> component-keep-alive<Teleport>: 用于覆盖层/传送门 -> component-teleport<Suspense>: 用于异步子树回退边界 -> component-suspense<Transition> 用于进入/离开效果 -> transition<TransitionGroup> 用于动画列表变更 -> transition-group仅在存在明确的产品或技术需求时使用这些功能。
性能优化是在功能实现之后进行的。在核心行为实现和验证之前不要进行优化。
每周安装量
13.3K
代码仓库
GitHub 星标数
2.1K
首次出现
2026年1月21日
安全审计
安装于
claude-code8.1K
opencode7.7K
gemini-cli7.5K
cursor7.1K
codex7.1K
github-copilot6.6K
Use this skill as an instruction set. Follow the workflow in order unless the user explicitly asks for a different order.
<script setup lang="ts">.vue-options-api-best-practices skill if available.vue-jsx-best-practices skill if available.references/reactivity.mdreferences/sfc.mdreferences/component-data-flow.mdreferences/composables.mdCreate a brief component map before implementation for any non-trivial feature.
components/<feature>/..., composables/use<Feature>.ts) when adding more than one component.These are essential, must-know foundations. Apply all of them in every Vue task using the core references already loaded in section 1.1.
1.1: reactivityref/reactive), derive everything possible with computed.1.1: sfc<script> → <template> → <style>.v-html, list rendering, conditional rendering choices).Split a component when it has more than one clear responsibility (e.g. data orchestration + UI, or multiple independent UI sections).
useXxx()).Apply objective split triggers. Split the component if any condition is true:
Entry/root and route view rule:
1.1: component-data-flowv-model only for true two-way component contracts.defineProps, defineEmits, and InjectionKey as needed.1.1: composablesDo not add these by default. Load the matching reference only when the requirement exists.
<KeepAlive> for stateful view caching -> component-keep-alive<Teleport> for overlays/portals -> component-teleport<Suspense> for async subtree fallback boundaries -> component-suspense<Transition> for enter/leave effects -> transitionUse these only when there is explicit product or technical need.
Performance work is a post-functionality pass. Do not optimize before core behavior is implemented and verified.
Weekly Installs
13.3K
Repository
GitHub Stars
2.1K
First Seen
Jan 21, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
claude-code8.1K
opencode7.7K
gemini-cli7.5K
cursor7.1K
codex7.1K
github-copilot6.6K
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
AI代码审查工具 - 自动化安全漏洞检测与代码质量分析 | 支持多领域检查清单
1,200 周安装
AI智能体长期记忆系统 - 精英级架构,融合6种方法,永不丢失上下文
1,200 周安装
AI新闻播客制作技能:实时新闻转对话式播客脚本与音频生成
1,200 周安装
Word文档处理器:DOCX创建、编辑、分析与修订痕迹处理全指南 | 自动化办公解决方案
1,200 周安装
React Router 框架模式指南:全栈开发、文件路由、数据加载与渲染策略
1,200 周安装
Nano Banana AI 图像生成工具:使用 Gemini 3 Pro 生成与编辑高分辨率图像
1,200 周安装
<TransitionGroup> for animated list mutations -> transition-group