Vue从入门到精通：Vue3现代接口开发实践手册(第二部分)

// directives/vFocus.ts
import type { Directive, DirectiveBinding } from 'vue'

export const vFocus: Directive<HTMLElement, boolean> = {
  // 元素挂载后触发
  mounted(el, binding) {
    if (binding.value !== false) {
      el.focus()
    }
  },

  // 元素更新前
  beforeUpdate(el, binding) {
    console.log('before update')
  },

  // 元素更新后
  updated(el, binding) {
    console.log('updated')
  },

  // 元素卸载前
  beforeUnmount(el) {
    console.log('before unmount')
  },

  // 元素卸载后
  unmounted(el) {
    console.log('unmounted')
  }
}

// directives/vPermission.ts
import type { Directive } from 'vue'
import { useAuthStore } from '@/stores/auth'

export const vPermission: Directive<HTMLElement, string | string[]> = {
  mounted(el, binding) {
    const auth = useAuthStore()
    const required = Array.isArray(binding.value) ? binding.value : [binding.value]
    const hasPermission = required.some((perm) => auth.permissions.includes(perm))

    if (!hasPermission) {
      el.parentNode?.removeChild(el)   // 移除 DOM
      // 或者：el.style.display = 'none'
    }
  }
}

// directives/vDebounce.ts
import type { Directive } from 'vue'

export const vDebounce: Directive<HTMLElement, () => void> = {
  mounted(el, binding) {
    let timer: ReturnType<typeof setTimeout>
    el.addEventListener('click', () => {
      clearTimeout(timer)
      timer = setTimeout(() => {
        binding.value()
      }, binding.arg ? parseInt(binding.arg) : 300)
    })
  }
}

// directives/vClickOutside.ts
import type { Directive } from 'vue'

export const vClickOutside: Directive<HTMLElement, (e: MouseEvent) => void> = {
  mounted(el, binding) {
    el.__clickOutsideHandler = (event: MouseEvent) => {
      if (!el.contains(event.target as Node)) {
        binding.value(event)
      }
    }
    document.addEventListener('click', el.__clickOutsideHandler)
  },
  unmounted(el) {
    document.removeEventListener('click', el.__clickOutsideHandler)
  }
}

// plugins/analytics.ts
import type { App, Plugin } from 'vue'

interface AnalyticsOptions {
  trackingId: string
  debug?: boolean
}

export const AnalyticsPlugin: Plugin = {
  install(app: App, options: AnalyticsOptions) {
    // 全局属性
    app.config.globalProperties.$analytics = {
      track(event: string, data?: Record<string, unknown>) {
        if (options.debug) {
          console.log(`[Analytics] ${event}`, data)
        }
        // 发送到分析服务
      }
    }

    // 全局指令
    app.directive('track', {
      mounted(el, binding) {
        el.addEventListener('click', () => {
          app.config.globalProperties.$analytics.track(binding.value)
        })
      }
    })

    // 全局组件
    app.component('AnalyticsBanner', {
      template: '<div class="analytics-banner">Cookie Consent</div>'
    })

    // provide 全局数据
    app.provide('analyticsConfig', options)
  }
}

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { AnalyticsPlugin } from './plugins/analytics'

const app = createApp(App)

app.use(AnalyticsPlugin, {
  trackingId: 'UA-XXXXX',
  debug: import.meta.env.DEV
})

app.mount('#app')

// main.ts
const app = createApp(App)

// 全局错误处理
app.config.errorHandler = (err, instance, info) => {
  console.error('Global error:', err, info)
  // 发送到错误监控服务
}

// 全局警告处理（开发模式）
app.config.warnHandler = (msg, instance, trace) => {
  console.warn('Vue warning:', msg)
}

// 全局属性（不推荐过度使用，优先使用 provide/inject 或 Pinia）
app.config.globalProperties.$formatDate = (date: Date) => {
  return date.toLocaleDateString('zh-CN')
}

// 自定义元素（将 Vue 组件用作 Web Component）
app.config.compilerOptions.isCustomElement = (tag) => {
  return tag.startsWith('my-')
}

// router/index.ts
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue')
  },
  {
    path: '/users/:id',
    name: 'UserDetail',
    component: () => import('@/views/UserDetail.vue'),
    props: true   // 将路由参数作为 props 传递给组件
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: { requiresAuth: true },
    children: [
      {
        path: '',
        name: 'DashboardHome',
        component: () => import('@/views/dashboard/Home.vue')
      },
      {
        path: 'settings',
        name: 'Settings',
        component: () => import('@/views/dashboard/Settings.vue')
      }
    ]
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('@/views/NotFound.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),     // HTML5 History 模式
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) return savedPosition
    return { top: 0 }
  }
})

export default router

// router/index.ts
router.beforeEach((to, from, next) => {
  // 全局前置守卫
  const authStore = useAuthStore()

  if (to.meta.requiresAuth && !authStore.isLoggedIn) {
    // 未登录，跳转到登录页
    next({ name: 'Login', query: { redirect: to.fullPath } })
  } else if (to.name === 'Login' && authStore.isLoggedIn) {
    // 已登录，跳转到首页
    next({ name: 'Home' })
  } else {
    next()
  }
})

router.afterEach((to, from) => {
  // 全局后置钩子（适合设置页面标题、埋点等）
  document.title = to.meta.title ? `${to.meta.title} - MyApp` : 'MyApp'
})

// 路由独享守卫
{
  path: '/admin',
  component: AdminLayout,
  beforeEnter: (to, from, next) => {
    if (!isAdmin()) {
      next('/403')
    } else {
      next()
    }
  }
}

// ✅ 推荐：动态 import 实现懒加载
const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue')
  },
  {
    path: '/admin',
    component: () => import(/* webpackChunkName: "admin" */ '@/views/Admin.vue')
  }
]

// ✅ 配合 Suspense + defineAsyncComponent
import { defineAsyncComponent } from 'vue'
const HeavyView = defineAsyncComponent(() => import('@/views/HeavyView.vue'))

// 扩展 RouteMeta 类型
declare module 'vue-router' {
  interface RouteMeta {
    title?: string
    requiresAuth?: boolean
    roles?: string[]
    layout?: 'default' | 'admin' | 'blank'
  }
}

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

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    name: 'Counter'
  }),

  getters: {
    double: (state) => state.count * 2,
    // 引用其他 getter
    doublePlusOne(): number {
      return this.double + 1
    }
  },

  actions: {
    increment(amount = 1) {
      this.count += amount
    },

    async fetchCount() {
      const response = await fetch('/api/count')
      this.count = await response.json()
    }
  }
})

// stores/counter.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  // state → ref
  const count = ref(0)
  const name = ref('Counter')

  // getters → computed
  const double = computed(() => count.value * 2)
  const doublePlusOne = computed(() => double.value + 1)

  // actions → functions
  function increment(amount = 1) {
    count.value += amount
  }

  async function fetchCount() {
    const response = await fetch('/api/count')
    count.value = await response.json()
  }

  return { count, name, double, doublePlusOne, increment, fetchCount }
})

// stores/cart.ts
import { defineStore } from 'pinia'
import { useUserStore } from './user'

export const useCartStore = defineStore('cart', () => {
  const userStore = useUserStore()  // 在 setup store 中可以直接引用其他 store

  const items = ref<CartItem[]>([])
  const total = computed(() => items.value.reduce((sum, item) => sum + item.price, 0))

  function addItem(item: CartItem) {
    if (!userStore.isLoggedIn) {
      throw new Error('请先登录')
    }
    items.value.push(item)
  }

  return { items, total, addItem }
})

// main.ts
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
app.use(pinia)

// stores/user.ts
export const useUserStore = defineStore('user', () => {
  const token = ref('')
  const user = ref<User | null>(null)

  return { token, user }
}, {
  persist: {
    key: 'user-store',
    storage: localStorage,   // 或 sessionStorage
    pick: ['token']          // 仅持久化指定字段
  }
})

import type {
  // Props / Emits 类型
  PropType,
  // 组件实例
  ComponentPublicInstance,
  // Setup 上下文
  SetupContext,
  // VNode
  VNode,
  // 指令
  Directive,
  // 插件
  Plugin
} from 'vue'

// 推断 defineProps 的类型
type Props = {
  [K in keyof InstanceType<typeof MyComponent>['$props']]: InstanceType<typeof MyComponent>['$props'][K]
}

// 获取 emits 的参数类型
type EmitParams = Parameters<InstanceType<typeof MyComponent>['$emit']>

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    vue(),
    visualizer({ open: true })   // 分析 bundle 体积
  ],

  build: {
    // 手动分包
    rollupOptions: {
      output: {
        manualChunks: {
          vue: ['vue', 'vue-router', 'pinia'],
          ui: ['element-plus'],
          utils: ['lodash-es', 'dayjs']
        }
      }
    },

    // 压缩
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,    // 移除 console
        drop_debugger: true    // 移除 debugger
      }
    },

    // 产物大小警告
    chunkSizeWarningLimit: 500
  }
})

// tests/unit/counter.spec.ts
import { describe, it, expect, beforeEach } from 'vitest'
import { setActivePinia, createPinia } from 'pinia'
import { useCounterStore } from '@/stores/counter'

describe('Counter Store', () => {
  beforeEach(() => {
    setActivePinia(createPinia())
  })

  it('初始状态正确', () => {
    const store = useCounterStore()
    expect(store.count).toBe(0)
    expect(store.double).toBe(0)
  })

  it('increment 正确递增', () => {
    const store = useCounterStore()
    store.increment()
    expect(store.count).toBe(1)
    expect(store.double).toBe(2)
  })

  it('increment 支持参数', () => {
    const store = useCounterStore()
    store.increment(5)
    expect(store.count).toBe(5)
  })
})

// tests/unit/HelloWorld.spec.ts
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld', () => {
  it('渲染 props.title', () => {
    const wrapper = mount(HelloWorld, {
      props: { title: 'Hello Vitest' }
    })
    expect(wrapper.text()).toContain('Hello Vitest')
  })

  it('点击按钮触发 emit', async () => {
    const wrapper = mount(HelloWorld, {
      props: { title: 'Test' }
    })
    await wrapper.find('button').trigger('click')
    expect(wrapper.emitted('update')).toBeTruthy()
    expect(wrapper.emitted('update')![0]).toEqual([1, 'hello'])
  })

  it('slot 内容正确渲染', () => {
    const wrapper = mount(HelloWorld, {
      props: { title: 'Test' },
      slots: {
        default: '<p>Slot content</p>',
        header: '<h1>Header</h1>'
      }
    })
    expect(wrapper.find('p').text()).toBe('Slot content')
    expect(wrapper.find('h1').text()).toBe('Header')
  })

  it('v-model 双向绑定', async () => {
    const wrapper = mount(HelloWorld, {
      props: {
        modelValue: 'initial',
        'onUpdate:modelValue': (val: string) => wrapper.setProps({ modelValue: val })
      }
    })
    const input = wrapper.find('input')
    await input.setValue('new value')
    expect(wrapper.props('modelValue')).toBe('new value')
  })
})

// tests/e2e/home.spec.ts
import { test, expect } from '@playwright/test'

test.describe('首页', () => {
  test('正确渲染标题', async ({ page }) => {
    await page.goto('/')
    await expect(page.locator('h1')).toHaveText('Welcome to Vue App')
  })

  test('导航到关于页面', async ({ page }) => {
    await page.goto('/')
    await page.click('a[href="/about"]')
    await expect(page).toHaveURL('/about')
    await expect(page.locator('h1')).toHaveText('About')
  })

  test('表单提交', async ({ page }) => {
    await page.goto('/contact')
    await page.fill('input[name="name"]', '张三')
    await page.fill('input[name="email"]', 'zhangsan@example.com')
    await page.click('button[type="submit"]')
    await expect(page.locator('.success-message')).toBeVisible()
  })
})

// vitest.config.ts
import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath } from 'node:url'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  test: {
    environment: 'jsdom',
    globals: true,
    coverage: {
      provider: 'v8',
      reporter: ['text', 'html', 'lcov'],
      include: ['src/**/*.{ts,vue}'],
      exclude: ['src/**/*.d.ts', 'src/main.ts']
    }
  }
})

// server/api/posts.ts（Nuxt 3 内建 Server API）
export default defineEventHandler(async (event) => {
  const posts = await getPosts()
  return posts
})

// server/api/posts/[id].ts
export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, 'id')
  const post = await getPostById(id)
  return post
})

// services/http.ts
import axios, { type AxiosInstance, type AxiosRequestConfig } from 'axios'
import { useAuthStore } from '@/stores/auth'

const http: AxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
})

// 请求拦截器
http.interceptors.request.use((config) => {
  const authStore = useAuthStore()
  if (authStore.token) {
    config.headers.Authorization = `Bearer ${authStore.token}`
  }
  return config
})

// 响应拦截器
http.interceptors.response.use(
  (response) => response.data,
  (error) => {
    if (error.response?.status === 401) {
      // Token 过期，跳转登录
      window.location.href = '/login'
    }
    return Promise.reject(error)
  }
)

export default http

// services/user.ts
import http from './http'
import type { User, CreateUserDTO } from '@/types/user'

export const userService = {
  getAll: () => http.get<never, User[]>('/users'),
  getById: (id: string) => http.get<never, User>(`/users/${id}`),
  create: (data: CreateUserDTO) => http.post<never, User>('/users', data),
  update: (id: string, data: Partial<CreateUserDTO>) => http.put<never, User>(`/users/${id}`, data),
  delete: (id: string) => http.delete(`/users/${id}`)
}