vue
自信构建 Vue 3 组件
Vue 团队需要关于组件、响应式和 TypeScript 模式的最新指导。此 skill 为 Claude、Codex 和 Claude Code 提供聚焦的 Vue 3.5 参考资料。
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
Review the Skillstore skill "vue" from https://skillstore.io/skills/antfu-vue.md and its manifest at https://skillstore.io/api/skills/antfu-vue/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智能体仍应展示其计划，并按安全策略请求必要确认。
Agent 可读资源
当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。
测试它
正在使用“vue”。 构建一个类型化的 profile card 组件。
预期结果:
一份简洁的组件计划，包含 prop 名称、emitted events、状态选择和模板行为。
正在使用“vue”。 审查一个 data-loading composable。
预期结果:
- 识别数据加载的运行位置。
- 建议对过期请求进行清理。
- 解释响应式输入应如何更新结果。
正在使用“vue”。 解释何时使用 provide 和 inject。
预期结果:
一份决策指南，涵盖应用级依赖、库 keys、symbol 使用和更简单的 prop 替代方案。
安全审计
安全All 18 static findings are false positives caused by documentation syntax and illustrative Vue code. Backticks are Markdown fences or TypeScript template literals, while fetch calls are inert examples without malicious destinations or secret handling. No prompt injection, command execution, unauthorized network access, system reconnaissance, or data exfiltration intent was found.
风险因素
🌐 网络访问 (5)
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/antfu-vue/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/antfu-vue?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/antfu-vue?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/antfu-vue/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/antfu-vue.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 引用
antfu. (2026). vue security audit report (audit version 5) [Author version 2026.1.31]. Skillstore. https://skillstore.io/skills/antfu-vue/audits/5BibTeX 引用
@techreport{antfu-antfu-vue-2026,
author = {antfu},
title = {vue security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/antfu-vue/audits/5},
note = {Author version 2026.1.31}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "vue security audit report (audit version 5)"
version: "2026.1.31"
type: report
authors:
- name: "antfu"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/antfu-vue/audits/5"
identifiers:
- type: other
value: "skillstore:antfu-vue:audit:5"
description: "Skillstore immutable audit report identifier"
Skillstore 评分
评分依据 证据置信度: 高你能构建什么
构建类型化组件
使用 script setup、类型化 props、emits、slots 和 v-model 模式创建 Vue 组件。
现代化 Vue 代码
将现有组件重构为 Composition API、响应式状态和当前生命周期模式。
审查共享模式
检查 composables、provide/inject 使用、异步加载和模板 refs，确保设计可维护。
试试这些提示
使用 Vue skill 构建一个小型 Vue 3 组件，包含 script setup、类型化 props 和一个 emitted event。解释重要选择。
将这个 Vue Options API 组件转换为 Composition API。在合适的位置使用 ref、computed、watch 和清晰的生命周期钩子。保持行为不变。
为共享数据加载设计一个类型化 Vue composable。包含 loading state、error state、清理规则和一个示例组件用法。
审计此 Vue 功能中的 Suspense、top-level await、watcher cleanup、template refs 和 TypeScript 风险。推荐聚焦的改进。
最佳实践
- 为新的 Vue 组件使用带 TypeScript 的 script setup。
- 保持 computed getters 纯净，并改为修改源状态。
- 将可复用的有状态行为提取到聚焦的 composables 中。
避免
- 不要将 template refs 过度用于本应属于响应式数据的状态。
- 不要将生命周期钩子放在 awaited setup 工作之后。
- 不要以会丢失响应式的方式解构 reactive 对象。
常见问题
此 skill 面向哪个 Vue 版本？
我可以将它与 Codex 和 Claude Code 一起使用吗？
此 skill 会运行命令或安装包吗？
它能帮助迁移 Options API 代码吗？
它能替代官方 Vue 文档吗？
它会自动审查我的本地项目吗？
开发者详情
作者
antfu许可证
MIT
作者版本
v2026.1.31
Skillstore 修订
r2
引用
89edfdc710d0846129dcee6a929477b04f08052c
维护新鲜度
2026/7/24
使用量
22 次下载 · 187 次浏览