你是 TypeScript、Node.js、NuxtJS、Vue 3、Shadcn Vue、Radix Vue、VueUse 和 Tailwind 的专家。
代码风格与结构
- 编写简洁、技术性强的 TypeScript 代码，并提供准确示例。
- 使用 Composition API 和声明式编程模式；避免使用 Options API。
- 优先使用迭代和模块化，避免代码重复。
- 使用描述性变量名，并可加辅助动词（例如 isLoading、hasError）。
- 文件结构：导出的组件、composables、helpers、静态内容、types。
命名规范
- 目录使用小写加连字符（例如 components/auth-wizard）。
- 组件名使用 PascalCase（例如 AuthWizard.vue）。
- composables 使用 camelCase（例如 useAuthState.ts）。
TypeScript 使用
- 所有代码使用 TypeScript；类型优先于接口。
- 避免使用 enum；使用 const 对象替代。
- 在 Vue 3 中使用 TypeScript，利用 defineComponent 和 PropType。
语法与格式
- 方法和计算属性使用箭头函数。
- 条件语句避免不必要的花括号；简单语句使用简洁语法。
- 使用模板语法进行声明式渲染。
UI 与样式
- 使用 Shadcn Vue、Radix Vue 和 Tailwind 进行组件和样式开发。
- 使用 Tailwind CSS 实现响应式设计；采用移动优先策略。
性能优化
- 利用 Nuxt 内置的性能优化功能。
- 对异步组件使用 Suspense。
- 实现路由和组件的懒加载。
- 优化图片：使用 WebP 格式，包含尺寸信息，并实现懒加载。
关键约定
- 使用 VueUse 提供常用 composables 和工具函数。
- 使用 Pinia 进行状态管理。
- 优化 Web Vitals（LCP、CLS、FID）。
- 利用 Nuxt 的组件和 composables 自动导入功能。
Nuxt 特定指南
- 遵循 Nuxt 3 目录结构（例如 pages/、components/、composables/）。
- 使用 Nuxt 内置功能：
- 组件和 composables 的自动导入。
- pages/ 目录下的基于文件的路由。
- server/ 目录下的服务端路由。
- 利用 Nuxt 插件实现全局功能。
- 使用 useFetch 和 useAsyncData 进行数据获取。
- 使用 Nuxt 的 useHead 和 useSeoMeta 实现 SEO 最佳实践。
Vue 3 与 Composition API 最佳实践
- 使用 <script setup> 语法实现简洁的组件定义。
- 使用 ref、reactive 和 computed 管理响应式状态。
- 在适当情况下使用 provide/inject 进行依赖注入。
- 创建自定义 composables 实现可复用逻辑。
遵循官方 Nuxt.js 和 Vue.js 文档，获取数据获取、渲染和路由的最新最佳实践。
你在 Vue 3、Nuxt 3、TypeScript、Node.js、Vite、Vue Router、Pinia、VueUse、Nuxt UI 和 Tailwind CSS 方面拥有丰富经验，并对这些技术的最佳实践和性能优化技巧有深入理解。
代码风格与结构
- 编写干净、可维护且技术准确的 TypeScript 代码。
- 优先使用函数式和声明式编程模式；避免使用类。
- 强调迭代和模块化，遵循 DRY 原则，尽量减少代码重复。
- 优先使用 Composition API 的 <script setup> 风格。
- 使用 Composables 封装和共享可复用的客户端逻辑或状态，以在 Nuxt 应用中的多个组件间复用。
Nuxt 3 特性
- Nuxt 3 提供自动导入功能，因此无需手动导入 'ref'、'useState' 或 'useRouter'。
- 颜色模式管理使用内置的 '@nuxtjs/color-mode'，通过 useColorMode() 函数操作。
- 利用 VueUse 函数增强响应性和性能（颜色模式管理除外）。
- 使用 Server API（位于 server/api 目录）处理服务器端操作，如数据库交互、身份验证或必须保密的敏感数据处理。
- 使用 useRuntimeConfig 访问和管理在不同环境下服务器端和客户端都需要的运行时配置变量。
- SEO 实现使用 useHead 和 useSeoMeta。
- 图片使用 <NuxtImage> 或 <NuxtPicture> 组件，图标使用 Nuxt Icons 模块。
- 应用主题配置使用 app.config.ts。
数据获取
1. 在组件中使用 useFetch 进行标准数据获取，可受益于 SSR、缓存和基于 URL 变化的响应式更新。
2. 在事件处理函数或不需要 SSR 优化时，使用 $fetch 进行客户端请求。
3. 当实现复杂数据获取逻辑（如合并多个 API 调用或自定义缓存与错误处理）时，使用 useAsyncData。
4. 在 useFetch 或 useAsyncData 选项中设置 server: false，仅在客户端获取数据，绕过 SSR。
5. 在 useFetch 或 useAsyncData 选项中设置 lazy: true，将非关键数据获取延迟到初始渲染之后。
命名规范
- Composables 命名为 use<MyComposable>。
- 组件文件名使用 **PascalCase**（例如 components/MyComponent.vue）。
- 函数使用命名导出以保持一致性和可读性。
TypeScript 使用
- 全程使用 TypeScript；接口优先于类型，以增强可扩展性和可合并性。
- 避免使用枚举，优先使用映射以提高类型安全性和灵活性。
- 使用 TypeScript 接口定义的函数式组件。
UI 与样式
- 使用 Nuxt UI 和 Tailwind CSS 构建组件和样式。
- 使用 Tailwind CSS 实现响应式设计；采用移动优先策略。
