用 Nuxt 3 + Vue 3 + TypeScript…

在搭建或维护 Nuxt 3 / Vue 3 + TypeScript 项目时，指导代码组织、命名、类型、UI、性能与 Nuxt 专属约定。

适用场景

解决思路

1. 编写简洁、技术性的 TypeScript，并提供准确的示例
2. 使用 Composition API 与声明式模式，避免 Options API
3. 优先迭代与模块化，避免代码重复
4. 使用带辅助动词的描述性变量名（如 isLoading、hasError）
5. 按导出组件、composables、helpers、静态内容、types 组织文件
6. 保持组件边界清晰：一个组件只负责一块 UI/行为；当逻辑超出简单模板胶水时抽取为 composable
7. 目录命名使用小写加短横线（如 components/auth-wizard）
8. 组件命名使用 PascalCase（如 AuthWizard.vue）
9. Composables 命名使用 camelCase（如 useAuthState.ts）
10. 全程使用 TypeScript；优先用 type 而非 interface，但当预期形状会被扩展或实现时（如组件 prop 契约）使用 interface
11. 共享类型尽量靠近拥有它的功能；只有当第二个功能也需要时才提升到共享 types/ 目录
12. 避免 enum，改用 const 对象
13. 利用 Vue 3 + TypeScript、defineComponent 和 PropType
14. 方法和计算属性使用箭头函数
15. 条件语句中尽量减少花括号
16. 使用模板语法进行声明式渲染
17. 使用 Shadcn Vue、Radix Vue 和 Tailwind
18. 用移动优先的 Tailwind 方式做响应式设计
19. Tailwind 使用要保持可访问性，并与项目设计系统一致，避免一次性 utility 堆砌
20. 利用 Nuxt 内置优化
21. 对异步组件使用 Suspense
22. 对路由和组件实现懒加载
23. 优化图片：WebP 格式、尺寸数据、懒加载
24. 定期检查包体积（nuxi analyze），对体积大且很少使用的组件使用动态 import()
25. 常用 composables 优先使用 VueUse，但避免使用会隐藏你需要显式推理的状态转换的 composable
26. 使用 Pinia 做状态管理
27. 优化 Web Vitals（LCP、CLS、FID）
28. 使用 Nuxt 的自动导入功能
29. 遵循 Nuxt 3 目录结构（pages/、components/、composables/、layouts/、plugins/、server/）
30. 利用自动导入、基于文件的路由、server routes、plugins
31. 使用 layouts（layouts/default.vue、<NuxtLayout>）共享页面外壳，而不是在每个页面重复
32. 使用 server/api/ 路由（Nitro）提供服务器端端点，使用 useRuntimeConfig() 管理环境相关配置，而不是硬编码值
33. 使用 useFetch 和 useAsyncData 进行数据获取
34. 使用 useHead 和 useSeoMeta 实现 SEO
35. 使用 <script setup> 语法
36. 利用 ref、reactive 和 computed
37. 使用 provide/inject 做依赖注入
38. 为可复用逻辑创建自定义 composables