Prompts-MCP 686 skills · ai / design / design-pattern / framework / fundamentals / habit / lang / tech-selection
/mcp/sse
framework framework/vue/index.md medium

framework-vue-index

Vue3 组合式 API 使用约定索引 — setup / 响应式(ref·reactive·computed·watch) / SFC 结构 / Pinia / Router / 生命周期与响应式丢失坑。Use when 写或改 .vue 组件 / 用组合式 API / 配 Pinia 状态 / 配 Vue Router 路由时。

子项索引

子项 一句话
composition-api skill Vue3 组件一律用 script setup 组合式写法，可复用有状态逻辑抽 composable
reactivity skill Vue3 响应式 API 选型 — ref / reactive / computed / watch·watchEffect
sfc-structure skill .vue 单文件组件三块固定顺序 script setup·template·style scoped，样式默认 scoped 防污染
pinia skill Vue3 全局状态管理 Pinia — defineStore 组合式 setup store，storeToRefs 解构保响应式
vue-router skill Vue Router 用 createRouter+createWebHistory，路由 component 懒加载 import()，鉴权放全局 beforeEach 早返回
lifecycle-and-pitfalls skill Vue3 组合式生命周期钩子时机与高频坑 — onMounted/onUnmounted/onUpdated 及取数·DOM·清理放哪

Vue3 · 组合式 API 使用约定

本层包含

名称 类型 一句话
composition-api skill setup / script setup 写法 / props·emit 声明
reactivity skill ref vs reactive / computed / watch / 解构丢响应
sfc-structure skill SFC 块顺序 / scoped / defineOptions
pinia skill defineStore / state·getter·action / storeToRefs
vue-router skill 路由表 / 守卫 / useRoute·useRouter / 懒加载
lifecycle-and-pitfalls skill 钩子时机 / 解构重赋值丢响应 / watch 时机坑

何时下钻

  • 写新组件骨架 / 选 setup 还是 script setup / 声明 props·emit → composition-api.md
  • 该用 ref 还是 reactive / 派生值用 computed / 副作用用 watch → reactivity.md
  • 排 <template> <script setup> <style scoped> 块 / 组件命名 → sfc-structure.md
  • 跨组件共享状态 / 全局 store / storeToRefs 解构 → pinia.md
  • 配路由表 / 路由守卫 / 编程式跳转 / 路由懒加载 → vue-router.md
  • 钩子里取不到 DOM / reactive 解构后数据不更新 / watch 不触发 → lifecycle-and-pitfalls.md

链接