附录B：练习题集

分章节练习题，帮助巩固学习成果，提升实战能力

📚 练习说明

本练习题集按照教程章节顺序组织，每个章节包含：

基础练习：巩固核心概念
进阶练习：提升应用能力
实战练习：综合运用技能
挑战练习：拓展思维边界

🎯 第0章：工具链与开发体验

基础练习

环境配置
- 安装 Node.js 18+ 和 pnpm
- 配置 VS Code 开发环境
- 创建第一个 Vue3 + TypeScript 项目
代码规范
- 配置 ESLint 和 Prettier
- 设置提交规范（commitlint + husky）
- 配置自动格式化

进阶练习

项目模板
- 创建一个可复用的项目模板
- 包含完整的工具链配置
- 支持一键初始化新项目
开发工具
- 配置调试环境
- 设置热重载
- 优化开发体验

实战练习

脚手架工具
- 开发一个 CLI 工具
- 支持项目创建和配置
- 集成最佳实践

🎯 第1章：TypeScript 核心

基础练习

类型系统

// 练习1：定义用户类型
interface User {
  id: number
  name: string
  email: string
  age?: number
}

// 练习2：实现类型安全的函数
function createUser(userData: Partial<User>): User {
  // 实现函数
}

泛型应用

// 练习3：实现通用 API 响应类型
interface ApiResponse<T> {
  data: T
  message: string
  success: boolean
}

// 练习4：实现通用工具函数
function pick<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
  // 实现函数
}

进阶练习

高级类型

// 练习5：实现条件类型
type NonNullable<T> = T extends null | undefined ? never : T

// 练习6：实现映射类型
type Partial<T> = {
  [P in keyof T]?: T[P]
}

Vue 类型集成

// 练习7：定义组件 Props 类型
interface ButtonProps {
  type?: 'primary' | 'secondary' | 'danger'
  size?: 'small' | 'medium' | 'large'
  disabled?: boolean
}

// 练习8：定义 Emit 类型
interface ButtonEmits {
  click: [event: MouseEvent]
  focus: [event: FocusEvent]
}

实战练习

类型安全的状态管理
- 实现类型安全的 Pinia store
- 定义完整的用户状态类型
- 实现类型安全的 actions
API 类型定义
- 定义完整的 API 接口类型
- 实现类型安全的 HTTP 客户端
- 处理错误类型

🎯 第2章：CSS 现代能力

基础练习

布局练习

/* 练习1：三栏布局 */
.three-column {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 20px;
  min-height: 100vh;
}

/* 练习2：响应式网格 */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

现代特性

/* 练习3：容器查询 */
.card {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 20px;
  }
}

/* 练习4：:has() 选择器 */
.field:has(input:focus) {
  border-color: #007bff;
}

进阶练习

CSS 变量系统

/* 练习5：设计令牌 */
:root {
  --color-primary: #007bff;
  --color-secondary: #6c757d;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
}

/* 练习6：主题切换 */
[data-theme="dark"] {
  --color-primary: #0d6efd;
  --color-secondary: #adb5bd;
}

动画效果

/* 练习7：关键帧动画 */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 练习8：过渡效果 */
.button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

实战练习

组件库设计
- 设计一套完整的 CSS 组件库
- 实现主题切换功能
- 支持暗色模式
响应式设计
- 实现移动端优先的设计
- 使用容器查询优化组件
- 实现流畅的交互效果

🎯 第3章：Vue3 核心与原理

基础练习

响应式系统

// 练习1：实现简化版 ref
function ref<T>(value: T) {
  // 实现响应式 ref
}

// 练习2：实现简化版 reactive
function reactive<T extends object>(target: T) {
  // 实现响应式 reactive
}

组合式 API

// 练习3：实现 useCounter
function useCounter(initialValue = 0) {
  // 实现计数器逻辑
}

// 练习4：实现 useLocalStorage
function useLocalStorage<T>(key: string, defaultValue: T) {
  // 实现本地存储逻辑
}

进阶练习

自定义指令

// 练习5：实现 v-focus 指令
const vFocus = {
  mounted(el: HTMLElement) {
    el.focus()
  }
}

// 练习6：实现 v-click-outside 指令
const vClickOutside = {
  mounted(el: HTMLElement, binding: any) {
    // 实现点击外部逻辑
  }
}

插件开发

// 练习7：实现 toast 插件
const ToastPlugin = {
  install(app: App) {
    // 实现 toast 插件
  }
}

实战练习

状态管理库
- 实现简化版 Pinia
- 支持持久化存储
- 实现插件系统
组件通信
- 实现 provide/inject 通信
- 实现事件总线
- 实现状态共享

🎯 第4章：路由与状态管理

基础练习

路由配置

// 练习1：配置嵌套路由
const routes = [
  {
    path: '/dashboard',
    component: DashboardLayout,
    children: [
      { path: '', component: DashboardHome },
      { path: 'profile', component: Profile },
      { path: 'settings', component: Settings }
    ]
  }
]

状态管理

// 练习2：实现用户 store
export const useUserStore = defineStore('user', () => {
  const user = ref<User | null>(null)
  const isLoggedIn = computed(() => !!user.value)
  
  const login = async (credentials: LoginCredentials) => {
    // 实现登录逻辑
  }
  
  return { user, isLoggedIn, login }
})

进阶练习

路由守卫

// 练习3：实现权限守卫
router.beforeEach((to, from, next) => {
  const userStore = useUserStore()
  
  if (to.meta.requiresAuth && !userStore.isLoggedIn) {
    next('/login')
  } else {
    next()
  }
})

状态持久化

// 练习4：实现状态持久化
const usePersistedStore = defineStore('persisted', () => {
  const state = ref(JSON.parse(localStorage.getItem('state') || '{}'))
  
  watch(state, (newState) => {
    localStorage.setItem('state', JSON.stringify(newState))
  }, { deep: true })
  
  return { state }
})

实战练习

权限管理系统
- 实现基于角色的权限控制
- 支持动态路由生成
- 实现权限验证中间件
数据缓存策略
- 实现 API 数据缓存
- 支持缓存失效策略
- 实现离线数据同步

🎯 第5章：工程化与性能

基础练习

构建优化

// 练习1：配置 Vite 构建优化
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia'],
          ui: ['element-plus']
        }
      }
    }
  }
})

图片优化

// 练习2：实现图片懒加载
const useLazyImage = (src: string) => {
  const imageRef = ref<HTMLImageElement>()
  const loaded = ref(false)
  
  onMounted(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // 加载图片
        }
      })
    })
    
    if (imageRef.value) {
      observer.observe(imageRef.value)
    }
  })
  
  return { imageRef, loaded }
}

进阶练习

性能监控

// 练习3：实现性能监控
const usePerformanceMonitor = () => {
  const measurePerformance = (name: string, fn: Function) => {
    const start = performance.now()
    const result = fn()
    const end = performance.now()
    
    console.log(`${name} took ${end - start} milliseconds`)
    return result
  }
  
  return { measurePerformance }
}

错误边界

<!-- 练习4：实现错误边界组件 -->
<template>
  <div v-if="hasError" class="error-boundary">
    <h2>Something went wrong</h2>
    <button @click="retry">Retry</button>
  </div>
  <slot v-else />
</template>

<script setup lang="ts">
const hasError = ref(false)

const retry = () => {
  hasError.value = false
}

onErrorCaptured((error) => {
  hasError.value = true
  console.error('Error caught by boundary:', error)
  return false
})
</script>

实战练习

性能优化工具
- 实现性能分析工具
- 支持性能报告生成
- 实现性能建议系统
监控系统
- 实现错误监控
- 支持性能指标收集
- 实现告警系统

🎯 第6章：测试与质量

基础练习

单元测试

// 练习1：测试工具函数
describe('formatDate', () => {
  it('should format date correctly', () => {
    const date = new Date('2024-01-01')
    expect(formatDate(date)).toBe('2024/1/1')
  })
})

// 练习2：测试组合式函数
describe('useCounter', () => {
  it('should increment counter', () => {
    const { count, increment } = useCounter()
    increment()
    expect(count.value).toBe(1)
  })
})

组件测试

// 练习3：测试 Vue 组件
describe('Button', () => {
  it('should render correctly', () => {
    const wrapper = mount(Button, {
      props: { type: 'primary' },
      slots: { default: 'Click me' }
    })
    
    expect(wrapper.text()).toBe('Click me')
    expect(wrapper.classes()).toContain('btn-primary')
  })
})

进阶练习

E2E 测试

// 练习4：测试用户流程
test('user can login and view dashboard', async ({ page }) => {
  await page.goto('/login')
  await page.fill('[data-testid="email"]', 'test@example.com')
  await page.fill('[data-testid="password"]', 'password')
  await page.click('[data-testid="login-button"]')
  
  await expect(page).toHaveURL('/dashboard')
  await expect(page.locator('[data-testid="welcome-message"]')).toBeVisible()
})

测试覆盖率

// 练习5：配置测试覆盖率
export default defineConfig({
  test: {
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
      thresholds: {
        global: {
          branches: 80,
          functions: 80,
          lines: 80,
          statements: 80
        }
      }
    }
  }
})

实战练习

测试工具开发
- 实现测试工具函数库
- 支持组件测试辅助函数
- 实现测试数据生成器
质量保证流程
- 实现自动化测试流程
- 支持测试报告生成
- 实现质量门禁

🎯 第7章：CSS 进阶专题

基础练习

设计令牌系统

/* 练习1：实现设计令牌 */
:root {
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-500: #3b82f6;
  --color-primary-900: #1e3a8a;
  
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
}

容器查询

/* 练习2：实现响应式卡片 */
.card {
  container-type: inline-size;
  display: grid;
  gap: 1rem;
}

@container (min-width: 400px) {
  .card {
    grid-template-columns: 1fr 2fr;
  }
}

进阶练习

动画系统

/* 练习3：实现动画系统 */
.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

.animate-slide-up {
  animation: slideUp 0.3s ease-out;
}

.animate-scale {
  animation: scale 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes scale {
  from { transform: scale(0.95); }
  to { transform: scale(1); }
}

主题系统

/* 练习4：实现主题系统 */
[data-theme="light"] {
  --bg-primary: #ffffff;
  --text-primary: #1a1a1a;
  --border-primary: #e5e5e5;
}

[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --text-primary: #ffffff;
  --border-primary: #404040;
}

.theme-toggle {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
}