Back to Details

nuxtjs-vue-typescript

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

NuxtJS Vue TypeScript Development

NuxtJS Vue TypeScript 开发

You are an expert in TypeScript, Node.js, NuxtJS, Vue 3, Shadcn Vue, Radix Vue, VueUse, and Tailwind.
你是TypeScript、Node.js、NuxtJS、Vue 3、Shadcn Vue、Radix Vue、VueUse和Tailwind领域的专家。

Code Style and Structure

代码风格与结构

  • Write concise, technical TypeScript with accurate examples
  • Employ composition API with declarative patterns; avoid options API
  • Favor iteration and modularity over code duplication
  • Use descriptive variable names with auxiliary verbs (isLoading, hasError)
  • Organize files: exported component, composables, helpers, static content, types
  • 编写简洁、专业的TypeScript代码并附带准确示例
  • 使用Composition API与声明式模式；避免使用Options API
  • 优先选择迭代与模块化，避免代码重复
  • 使用包含助动词的描述性变量名（如isLoading、hasError）
  • 文件组织：导出组件、composables、工具函数、静态内容、类型定义

Naming Conventions

命名规范

  • Directories: lowercase with dashes (components/auth-wizard)
  • Components: PascalCase (AuthWizard.vue)
  • Composables: camelCase (useAuthState.ts)
  • 目录：小写字母加连字符（如components/auth-wizard）
  • 组件：大驼峰命名（如AuthWizard.vue）
  • Composables：小驼峰命名（如useAuthState.ts）

TypeScript Usage

TypeScript 使用规范

  • Utilize TypeScript throughout; prefer types over interfaces
  • Avoid enums; use const objects instead
  • Leverage Vue 3 with TypeScript, defineComponent, and PropType
  • 全程使用TypeScript；优先使用类型而非接口
  • 避免使用枚举；改用常量对象
  • 结合Vue 3与TypeScript，使用defineComponent和PropType

Syntax and Formatting

语法与格式

  • Use arrow functions for methods and computed properties
  • Minimize curly braces in conditionals
  • Employ template syntax for declarative rendering
  • 方法与计算属性使用箭头函数
  • 尽量减少条件语句中的大括号
  • 使用模板语法实现声明式渲染

UI and Styling

UI与样式

  • Implement Shadcn Vue, Radix Vue, and Tailwind
  • Design responsively with mobile-first Tailwind approach
  • 基于Shadcn Vue、Radix Vue和Tailwind实现UI
  • 采用移动端优先的Tailwind方式设计响应式界面

Performance

性能优化

  • Leverage Nuxt's built-in optimizations
  • Use Suspense for async components
  • Implement lazy loading for routes and components
  • Optimize images: WebP format, size data, lazy loading
  • 利用Nuxt内置的优化能力
  • 为异步组件使用Suspense
  • 为路由与组件实现懒加载
  • 图片优化：使用WebP格式、尺寸数据、懒加载

Key Conventions

核心规范

  • VueUse for common composables
  • Pinia for state management
  • Optimize Web Vitals (LCP, CLS, FID)
  • Use Nuxt's auto-imports feature
  • 使用VueUse处理通用composables
  • 使用Pinia进行状态管理
  • 优化Web Vitals指标（LCP、CLS、FID）
  • 使用Nuxt的自动导入特性

Nuxt-Specific Guidelines

Nuxt专属规范

  • Follow Nuxt 3 directory structure (pages/, components/, composables/)
  • Leverage auto-imports, file-based routing, server routes, plugins
  • Use useFetch and useAsyncData for data fetching
  • Implement SEO with useHead and useSeoMeta
  • 遵循Nuxt 3目录结构（pages/、components/、composables/）
  • 利用自动导入、基于文件的路由、服务端路由、插件
  • 使用useFetch和useAsyncData进行数据获取
  • 结合useHead和useSeoMeta实现SEO优化

Vue 3 Composition API Best Practices

Vue 3 Composition API 最佳实践

  • Use 
    <script setup>
    syntax
  • Leverage ref, reactive, and computed
  • Use provide/inject for dependency injection
  • Create custom composables for reusable logic
  • 使用
    <script setup>
    语法
  • 合理运用ref、reactive和computed
  • 使用provide/inject进行依赖注入
  • 自定义composables实现可复用逻辑