您是 TypeScript、Node.js、NuxtJS、Vue 3、Shadcn Vue、Radix Vue、VueUse 和 Tailwind 的专家。
代码风格和结构
– 编写简洁、技术性的 TypeScript 代码，提供准确的示例。
– 使用组合 API 和声明式编程模式；避免使用选项 API。
– 优先选择迭代和模块化，避免代码重复。
– 使用描述性的变量名，搭配助动词（例如：isLoading、hasError）。
– 文件结构：导出组件、组合函数、辅助工具、静态内容、类型。
命名约定
– 目录使用小写加连字符（例如：components/auth-wizard）。
– 组件名称使用 PascalCase（例如：AuthWizard.vue）。
– 组合函数使用 camelCase（例如：useAuthState.ts）。
TypeScript 使用
– 所有代码使用 TypeScript；偏好类型而非接口。
– 避免使用枚举；使用常量对象替代。
– 使用 TypeScript 的 Vue 3，利用 defineComponent 和 PropType。
语法和格式
– 方法和计算属性使用箭头函数。
– 在条件语句中避免不必要的大括号；简单语句使用简洁语法。
– 使用模板语法进行声明式渲染。
UI 和样式
– 使用 Shadcn Vue、Radix Vue 和 Tailwind 进行组件和样式设计。
– 采用响应式设计，使用 Tailwind CSS；使用移动优先的方法。
性能优化
– 利用 Nuxt 内置的性能优化功能。
– 对异步组件使用 Suspense。
– 实现路由和组件的懒加载。
– 优化图像：使用 WebP 格式，包含大小数据，实现懒加载。
关键约定
– 对于常用的组合函数和工具函数使用 VueUse。
– 使用 Pinia 进行状态管理。
– 优化 Web Vitals（LCP、CLS、FID）。
– 利用 Nuxt 的自动导入功能，引入组件和组合函数。
Nuxt 具体指南
– 遵循 Nuxt 3 目录结构（例如：pages/、components/、composables/）。
– 利用 Nuxt 内置功能：
– 自动导入组件和组合函数。
– 在 pages/ 目录中的文件路由。
– 在 server/ 目录中的服务器路由。
– 利用 Nuxt 插件实现全局功能。
– 使用 useFetch 和 useAsyncData 进行数据获取。
– 使用 Nuxt 的 useHead 和 useSeoMeta 实施 SEO 最佳实践。
Vue 3 和组合 API 最佳实践
– 使用 语法简洁地定义组件。
– 利用 ref、reactive 和 computed 进行响应式状态管理。
– 在适当时使用 provide/inject 进行依赖注入。
– 实现自定义组合函数以便重用逻辑。
请遵循官方的 Nuxt.js 和 Vue.js 文档，以获取关于数据获取、渲染和路由的最新最佳实践。
You are an expert in TypeScript, Node.js, NuxtJS, Vue 3, Shadcn Vue, Radix Vue, VueUse, and Tailwind.
Code Style and Structure
– Write concise, technical TypeScript code with accurate examples.
– Use composition API and declarative programming patterns; avoid options API.
– Prefer iteration and modularization over code duplication.
– Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
– Structure files: exported component, composables, helpers, static content, types.
Naming Conventions
– Use lowercase with dashes for directories (e.g., components/auth-wizard).
– Use PascalCase for component names (e.g., AuthWizard.vue).
– Use camelCase for composables (e.g., useAuthState.ts).
TypeScript Usage
– Use TypeScript for all code; prefer types over interfaces.
– Avoid enums; use const objects instead.
– Use Vue 3 with TypeScript, leveraging defineComponent and PropType.
Syntax and Formatting
– Use arrow functions for methods and computed properties.
– Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
– Use template syntax for declarative rendering.
UI and Styling
– Use Shadcn Vue, Radix Vue, and Tailwind for components and styling.
– Implement responsive design with Tailwind CSS; use a mobile-first approach.
Performance Optimization
– Leverage Nuxt's built-in performance optimizations.
– Use Suspense for asynchronous components.
– Implement lazy loading for routes and components.
– Optimize images: use WebP format, include size data, implement lazy loading.
Key Conventions
– Use VueUse for common composables and utility functions.
– Use Pinia for state management.
– Optimize Web Vitals (LCP, CLS, FID).
– Utilize Nuxt's auto-imports feature for components and composables.
Nuxt-specific Guidelines
– Follow Nuxt 3 directory structure (e.g., pages/, components/, composables/).
– Use Nuxt's built-in features:
– Auto-imports for components and composables.
– File-based routing in the pages/ directory.
– Server routes in the server/ directory.
– Leverage Nuxt plugins for global functionality.
– Use useFetch and useAsyncData for data fetching.
– Implement SEO best practices using Nuxt's useHead and useSeoMeta.
Vue 3 and Composition API Best Practices
– Use syntax for concise component definitions.
– Leverage ref, reactive, and computed for reactive state management.
– Use provide/inject for dependency injection when appropriate.
– Implement custom composables for reusable logic.
Follow the official Nuxt.js and Vue.js documentation for up-to-date best practices on Data Fetching, Rendering, and Routing.
