技能 vue-development-guides
📦
vue-development-guides
v17.0.0 内容修订 r1 安全 ⚙️ 外部命令🌐 网络访问
构建更好的 Vue 和 Nuxt 组件
Vue 和 Nuxt 项目经常受到状态不清晰、组件脆弱以及数据流不一致的影响。此技能会引导 AI 助手采用实用的 Vue 3 和 Nuxt 3 模式。
支持: Claude Codex Code(CC)
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
智能体请求
Review the Skillstore skill "vue-development-guides" from https://skillstore.io/skills/vuejs-ai-vue-development-guides.md and its manifest at https://skillstore.io/api/skills/vuejs-ai-vue-development-guides/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智能体仍应展示其计划，并按安全策略请求必要确认。
Agent 可读资源
当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。
测试它
正在使用“vue-development-guides”。 一个大型 Vue 组件混合了 API 加载、过滤以及多个 UI 区块。
预期结果:
- 将数据加载拆分到 composable 中，让组件专注于渲染。
- 将派生的过滤列表移入 computed values，而不是存储重复状态。
- 将独立的 UI 区块拆分为子组件，并使用明确的 props 和 events。
正在使用“vue-development-guides”。 一个子组件会修改父级状态，并接收许多不相关的 props。
预期结果:
- 对子组件契约使用 props down 和 events up。
- 用更小且有类型的 props 替代宽泛的配置 props。
- 只有当重复的 props 需要穿过多层时，才考虑 provide 和 inject。
正在使用“vue-development-guides”。 一个 Nuxt 功能需要在多个页面之间共享状态并支持服务器渲染。
预期结果:
- 优先使用 Pinia，以获得 SSR-friendly 的共享状态和开发工具支持。
- 避免将 singleton composable stores 用于服务器渲染的共享状态。
- 通过 actions 或聚焦的 composable functions 保持状态变更明确。
安全审计
安全v4 • 2026/7/7 打开版本化报告
Reviewed all 22 static findings; each is a false positive from Markdown guidance, inline code spans, TypeScript template literals, or a relative Vue fetch example. No prompt injection, command execution, external endpoint, credential access, or data exfiltration intent was found.
5
已扫描文件
625
分析行数
0
复核项
0
已忽略误报
风险因素
最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。
审计者: codex 查看审计历史 →
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/vuejs-ai-vue-development-guides/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/vuejs-ai-vue-development-guides?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/vuejs-ai-vue-development-guides?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/vuejs-ai-vue-development-guides/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/vuejs-ai-vue-development-guides.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>学术引用 (APA · BibTeX · CFF)
APA 引用
vuejs-ai. (2026). vue-development-guides security audit report (audit version 4) [Author version 17.0.0]. Skillstore. https://skillstore.io/skills/vuejs-ai-vue-development-guides/audits/4BibTeX 引用
@techreport{vuejs-ai-vuejs-ai-vue-development-guides-2026,
author = {vuejs-ai},
title = {vue-development-guides security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/vuejs-ai-vue-development-guides/audits/4},
note = {Author version 17.0.0}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "vue-development-guides security audit report (audit version 4)"
version: "17.0.0"
type: report
authors:
- name: "vuejs-ai"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/vuejs-ai-vue-development-guides/audits/4"
identifiers:
- type: other
value: "skillstore:vuejs-ai-vue-development-guides:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore 评分
评分依据 证据置信度: 高 45
架构
100
可维护性
85
内容
70
社区
91
规范符合性
你能构建什么
审查 Vue 组件
检查组件中的响应式错误、数据流不清晰、职责过大以及 SFC 结构问题。
规划 Nuxt 状态管理
在开始实现之前，为 SSR 或 SPA 功能选择一种状态模式。
讲解 Vue 最佳实践
解释为什么 ref、computed value、watcher、emit 或 store 模式适合某个具体问题。
试试这些提示
审查我的组件
使用 Vue 开发指南审查这个 Vue 组件。重点关注 reactivity、props、emits、SFC 顺序和组件大小。
设计组件数据流
为这个 Vue 功能规划数据流。推荐在适合的位置使用 props、emits、v-model、provide 或 inject。
重构响应式逻辑
根据响应式指南重构这段 Vue 逻辑。识别 refs、reactive objects、computed values、watchers 和 cleanup 需求。
审计 Nuxt 功能架构
审计这个 Nuxt 功能架构。推荐组件拆分、composables、状态管理以及 SSR-safe store 模式。
最佳实践
- 除非项目标准不同，否则新的 Vue 3 组件应使用 Composition API 和 script setup。
- 通过有类型的 props、emits、v-model 以及聚焦的共享上下文保持数据流明确。
- 使用 computed values 表示派生状态，仅在受控副作用场景中使用 watchers。
避免
- 不要修改 props，也不要从子组件直接访问父级状态。
- 不要在一个大型组件中混合不相关的编排逻辑、状态和 UI 区块。
- 不要将 singleton composable stores 用于必须保持 request-safe 的 Nuxt SSR 状态。
常见问题
此技能支持 Nuxt 项目吗？
是的。它包含 Nuxt 3 指导，并推荐使用 Pinia 处理 SSR-friendly 的共享状态。
它能生成完整的 Vue 组件吗？
是的。它可以引导生成的组件遵循所包含的 Vue 3 和 SFC 实践。
它会运行代码或安装包吗？
不能。它是文档指导，不包含可执行的安装脚本。
它偏好哪种 Vue 风格？
它偏好在 Vue Single-File Components 中使用带有 script setup 和 TypeScript 的 Composition API。
它能替代 Pinia 文档吗？
不能。它可以帮助选择 store 模式，但项目团队仍应参考官方包文档。
为什么会报告安全警报？
静态分析器匹配到了 Markdown backticks、文档链接和 Vue 示例。AI 审查未发现恶意行为。
开发者详情
作者
vuejs-ai许可证
MIT
作者版本
v17.0.0
Skillstore 修订
r1
引用
36e07d5e13068e5be64447e8f20b427cf2cbd21a
维护新鲜度
2026/7/18
使用量
27 次下载 · 169 次浏览