技能 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 and events up。
- 用較小且有型別的 props 取代寬泛的設定 props。
- 只有在重複的 props 需要穿過多層時，才考慮 provide 和 inject。
正在使用「vue-development-guides」。 一個 Nuxt 功能需要跨頁共享狀態並支援伺服器端渲染。
預期結果:
- 偏好使用 Pinia，以取得適合 SSR 的共享狀態與開發工具支援。
- 避免將 singleton composable stores 用於 server-rendered shared state。
- 透過 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 元件
檢查元件是否有 reactivity 錯誤、資料流不清楚、職責過大以及 SFC 結構問題。
規劃 Nuxt 狀態管理
在開始實作前，為 SSR 或 SPA 功能選擇狀態模式。
教授 Vue 最佳實務
說明為什麼 ref、computed value、watcher、emit 或 store 模式適合特定問題。
試試這些提示
審查我的元件
使用 Vue development guides 審查這個 Vue 元件。專注於 reactivity、props、emits、SFC order 和 component size。
設計元件資料流
規劃這個 Vue 功能的資料流。建議 props、emits、v-model、provide 或 inject 各自適合的使用位置。
重構 Reactivity 邏輯
根據 reactivity guide 重構這段 Vue 邏輯。識別 refs、reactive objects、computed values、watchers 和 cleanup needs。
稽核 Nuxt 功能架構
稽核這個 Nuxt 功能架構。建議 component splits、composables、state management 和 SSR-safe store patterns。
最佳實務
- 除非專案標準不同，新的 Vue 3 元件應使用 Composition API 和 script setup。
- 使用 typed props、emits、v-model 和聚焦的共享 context，讓資料流保持明確。
- 使用 computed values 表示衍生狀態，並只將 watchers 用於受控的 side effects。
避免
- 不要修改 props，或從子元件直接存取父層狀態。
- 不要在一個大型元件中混合不相關的 orchestration、state 和 UI 區段。
- 不要將 singleton composable stores 用於必須保持 request-safe 的 Nuxt SSR state。
常見問題
這個技能支援 Nuxt 專案嗎？
是。它包含 Nuxt 3 的指引，並建議使用 Pinia 來處理適合 SSR 的共享狀態。
它可以產生完整的 Vue 元件嗎？
是。它可以引導生成的元件遵循內含的 Vue 3 和 SFC 實務。
它會執行程式碼或安裝套件嗎？
否。它是文件指引，不包含可執行的安裝腳本。
它偏好哪種 Vue 風格？
它偏好在 Vue Single-File Components 中使用 Composition API 搭配 script setup 和 TypeScript。
它會取代 Pinia 文件嗎？
否。它協助選擇 store 模式，但專案團隊仍應查閱官方套件文件。
為什麼會回報安全警示？
靜態分析器比對到了 Markdown backticks、documentation links 和 Vue examples。AI 審查未發現惡意行為。
開發者詳細資訊
作者
vuejs-ai授權
MIT
作者版本
v17.0.0
Skillstore 修訂
r1
引用
36e07d5e13068e5be64447e8f20b427cf2cbd21a
維護新鮮度
2026/7/18
使用量
27 次下載 · 169 次瀏覽