Frontend Vue

Vue 开发技能

现代 Vue.js 开发的综合技能，专注于 Nuxt 3、Vue 3 Composition API、Tailwind CSS 和 Vue 生态系统。

技术栈

核心框架：Vue 3 + Nuxt 3

Vue 3 特性

• 组合式 API (Composition API)：使用 <script setup> 复用逻辑
• 响应式系统：ref, reactive, computed, watch
• Teleport：将内容渲染到组件 DOM 层次结构之外
• Fragments：支持多个根节点
• Suspense：处理异步依赖

Nuxt 3 特性

• 自动导入：自动导入 Vue API 和组件
• 基于文件的路由：pages/ 目录中的文件创建路由
• 服务器引擎 (Nitro)：通用部署
• 数据获取：useFetch, useAsyncData
• 服务器路由：server/api/ 中的 API 端点
• SEO/Meta：useHead, useSeoMeta

UI 框架：Tailwind CSS + shadcn-vue

Tailwind CSS

• 实用优先架构
• 通过 tailwind.config.ts 配置
• 使用 PostCSS 优化

shadcn-vue (或类似库)

• shadcn/ui 的 Vue 移植版
• 基于 Radix Vue 的可访问组件
• 关键组件：Button, Input, Select, Dialog, Toast

状态管理

• Pinia：Vue 官方状态管理库
  • 模块化 Store
  • TypeScript 支持
  • DevTools 集成
  • 无 Mutation (只有 Actions)

项目架构

推荐目录结构 (Nuxt 3)

project-root/
├── app.vue            # 根组件
├── nuxt.config.ts     # 配置
├── components/        # 自动导入组件
│   ├── ui/            # UI 库组件
│   │   ├── button/
│   │   └── ...
│   └── Header.vue
├── pages/             # 路由
│   ├── index.vue
│   └── about.vue
├── layouts/           # 布局包装器
│   └── default.vue
├── composables/       # 自动导入逻辑
│   └── useUser.ts
├── server/            # 服务器 API
│   └── api/
│       └── hello.ts
├── stores/            # Pinia stores
│   └── counter.ts
└── assets/            # CSS, 图片
    └── main.css

最佳实践

使用 <script setup> 的组合式 API

• 对响应式变量使用 const。
• 按功能组织逻辑。
• 将复杂逻辑提取到组合式函数中 (composables/)。

性能

• 异步组件：使用 defineAsyncComponent 进行懒加载。
• 懒获取：对非关键数据在 useFetch 中使用 lazy: true 选项。
• 资源优化：使用 Nuxt Image 进行图片优化。

Nuxt 特定注意事项

• 水合不匹配 (Hydration Mismatch)：确保服务器渲染的 HTML 与客户端匹配。避免在初始渲染时使用随机 ID 或日期。
• 中间件：使用路由中间件进行权限守卫 (middleware/auth.ts)。

常见代码模式

带数据获取的 Nuxt 页面

<script setup lang="ts">
const { data: user, error } = await useFetch('/api/user/1')

if (error.value) {
  console.error(error.value)
}
</script>

<template>
  <div v-if="user" class="p-4">
    <h1 class="text-2xl font-bold">{{ user.name }}</h1>
    <p>{{ user.email }}</p>
  </div>
  <div v-else>加载中...</div>
</template>

Pinia Store

// stores/counter.ts
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

组合式函数 (Composable)

// composables/useMouse.ts
export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  return { x, y }
}