Vue 3企业级项目最佳实践：Composition API状态管理、TypeScript集成与单元测试全覆盖指南

标签：Vue 3, 最佳实践, Composition API, TypeScript, 前端开发
简介：总结Vue 3在企业级项目开发中的最佳实践方案，涵盖Composition API的合理使用、Pinia状态管理、TypeScript类型安全、组件库封装以及完整的测试策略。

一、引言：企业级项目对Vue 3的核心诉求

随着前端工程化水平的不断提升，现代企业级应用对框架的要求早已超越“能用”阶段，进入“可维护、可扩展、可测试、高性能”的新维度。Vue 3凭借其现代化的响应式系统、更灵活的组合式API（Composition API）和强大的类型支持（尤其是与TypeScript的深度集成），成为构建大型前端项目的首选之一。

然而，仅掌握基础语法远远不够。真正决定项目成败的关键，在于架构设计、代码组织、类型安全和自动化测试。本文将围绕以下五大核心主题展开：

Composition API 的合理使用与模块化设计
基于 Pinia 的状态管理架构
全栈式 TypeScript 类型安全实践
组件库封装与复用机制
覆盖全面的单元测试与端到端测试策略

我们将通过真实项目场景、代码示例与最佳实践建议，帮助你从“会用Vue 3”迈向“精通企业级开发”。

二、深入理解 Composition API：从语法到架构

2.1 为什么选择 Composition API？

相比传统的选项式 API（Options API），Composition API 提供了更清晰的逻辑组织方式，尤其适合复杂组件和跨组件逻辑复用。主要优势包括：

逻辑聚合：将相关逻辑（如表单校验、数据获取、生命周期等）集中在一个函数中
更好的类型推导：配合 TypeScript，提供更强的类型提示与错误检查
更好的可读性与可维护性：避免 data、methods、computed 等分散定义带来的阅读困难
增强的复用能力：通过自定义 Composables 封装通用逻辑

2.2 正确使用 `setup()` 和 `<script setup>`

✅ 推荐写法：`<script setup>`

<!-- UserCard.vue -->
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'

// 响应式数据
const userId = defineProps<{ id: string }>()
const user = ref<User | null>(null)
const loading = ref(false)

// 计算属性
const displayName = computed(() => {
  return user.value?.name || 'Unknown'
})

// 事件处理
const fetchUser = async () => {
  loading.value = true
  try {
    const res = await fetch(`/api/users/${userId.id}`)
    user.value = await res.json()
  } catch (error) {
    console.error('Failed to fetch user:', error)
  } finally {
    loading.value = false
  }
}

// 生命周期钩子
onMounted(() => {
  fetchUser()
})

// 暴露给模板的变量/方法
defineExpose({ fetchUser })
</script>

<template>
  <div class="user-card">
    <h3>{{ displayName }}</h3>
    <p v-if="loading">Loading...</p>
    <button @click="fetchUser" :disabled="loading">
      Reload
    </button>
  </div>
</template>

🔍 关键点说明：

使用 ref 定义响应式变量

使用 computed 处理派生状态

使用 onMounted 等生命周期钩子

使用 defineProps 接收父组件传参

使用 defineExpose 显式暴露方法（用于父组件调用）

❌ 避免的反模式

<!-- 错误示例：滥用全局状态或未封装逻辑 -->
<script setup>
import { ref } from 'vue'
import { fetchUserById } from '@/api/user'

const user = ref(null)
const loading = ref(false)

// 业务逻辑直接写在 setup 内，难以复用
async function loadUser(id) {
  loading.value = true
  try {
    const res = await fetchUserById(id)
    user.value = res.data
  } catch (err) {
    console.error(err)
  } finally {
    loading.value = false
  }
}

// 多个组件重复此逻辑 → 必须提取为 Composable
</script>

三、构建可复用的 Composables：逻辑抽象的最佳实践

3.1 什么是 Composable？

Composable 是一个返回响应式状态和方法的函数，遵循“单一职责原则”，可以被多个组件复用。

3.2 创建一个标准 Composable：`useUserFetch`

// src/composables/useUserFetch.ts
import { ref, computed, watch } from 'vue'
import type { User } from '@/types/user'

export interface UseUserFetchOptions {
  autoFetch?: boolean
  onSuccess?: (user: User) => void
  onError?: (error: Error) => void
}

export function useUserFetch(id: string | number, options: UseUserFetchOptions = {}) {
  const { autoFetch = true, onSuccess, onError } = options

  const user = ref<User | null>(null)
  const loading = ref(false)
  const error = ref<Error | null>(null)

  const fetchUser = async () => {
    if (!id) return
    loading.value = true
    error.value = null
    try {
      const res = await fetch(`/api/users/${id}`)
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      const data = await res.json()
      user.value = data
      onSuccess?.(data)
    } catch (err) {
      error.value = err instanceof Error ? err : new Error(String(err))
      onError?.(err as Error)
    } finally {
      loading.value = false
    }
  }

  // 自动加载
  if (autoFetch) {
    watch(
      () => id,
      (newId) => {
        if (newId) fetchUser()
      },
      { immediate: true }
    )
  }

  // 暴露接口
  return {
    user: computed(() => user.value),
    loading: computed(() => loading.value),
    error: computed(() => error.value),
    fetchUser,
    reset: () => {
      user.value = null
      error.value = null
      loading.value = false
    }
  }
}

3.3 在组件中使用

<!-- UserProfile.vue -->
<script setup lang="ts">
import { useUserFetch } from '@/composables/useUserFetch'
import { computed } from 'vue'

const props = defineProps<{ id: string }>()

const { user, loading, error, fetchUser, reset } = useUserFetch(props.id, {
  autoFetch: true,
  onSuccess: (u) => console.log('User loaded:', u.name),
  onError: (e) => alert(`Failed: ${e.message}`)
})

const isLoaded = computed(() => user.value !== null && !loading.value)
</script>

<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="error">Error: {{ error.message }}</div>
  <div v-else-if="isLoaded">
    <h2>{{ user!.name }}</h2>
    <p>{{ user!.email }}</p>
  </div>
  <button @click="fetchUser">Refresh</button>
  <button @click="reset">Reset</button>
</template>

✅ 最佳实践总结：

所有业务逻辑必须封装成 Composable

统一命名规范：useXxx（如 useAuth, useLocalStorage）

支持配置项（options），提高灵活性

使用 computed 包装响应式数据，避免直接暴露原始 ref

提供 reset / reload 等辅助方法

四、状态管理：使用 Pinia 实现结构化全局状态

4.1 为什么选择 Pinia？

轻量级：无依赖，体积小
类型友好：原生支持 TypeScript，自动推导类型
模块化：支持拆分 store，便于维护
热重载：开发时支持热更新
插件生态丰富：支持持久化、日志、DevTools 等

4.2 创建一个模块化的 Store

// src/stores/userStore.ts
import { defineStore } from 'pinia'
import type { User, UserFormData } from '@/types/user'

export const useUserStore = defineStore('user', {
  state: () => ({
    currentUser: null as User | null,
    users: [] as User[],
    token: localStorage.getItem('auth_token') || '',
    lastFetchedAt: null as Date | null
  }),

  getters: {
    isLoggedIn: (state) => !!state.token,
    isAdmin: (state) => state.currentUser?.role === 'admin',
    userCount: (state) => state.users.length
  },

  actions: {
    setToken(token: string) {
      this.token = token
      localStorage.setItem('auth_token', token)
    },

    clearToken() {
      this.token = ''
      localStorage.removeItem('auth_token')
    },

    async login(credentials: { email: string; password: string }) {
      try {
        const res = await fetch('/api/auth/login', {
          method: 'POST',
          body: JSON.stringify(credentials),
          headers: { 'Content-Type': 'application/json' }
        })

        if (!res.ok) throw new Error('Login failed')

        const data = await res.json()
        this.setToken(data.token)
        this.currentUser = data.user
        return true
      } catch (err) {
        console.error('Login error:', err)
        return false
      }
    },

    async fetchUsers() {
      try {
        const res = await fetch('/api/users')
        const data = await res.json()
        this.users = data
        this.lastFetchedAt = new Date()
      } catch (err) {
        console.error('Fetch users failed:', err)
      }
    },

    async createUser(userData: UserFormData) {
      const res = await fetch('/api/users', {
        method: 'POST',
        body: JSON.stringify(userData),
        headers: { 'Content-Type': 'application/json' }
      })
      if (!res.ok) throw new Error('Create failed')
      const newUser = await res.json()
      this.users.push(newUser)
      return newUser
    },

    logout() {
      this.clearToken()
      this.currentUser = null
    }
  }
})

4.3 从组件中使用 Store

<!-- LoginView.vue -->
<script setup lang="ts">
import { useUserStore } from '@/stores/userStore'
import { useRouter } from 'vue-router'
import { ref } from 'vue'

const userStore = useUserStore()
const router = useRouter()

const form = ref({
  email: '',
  password: ''
})

const handleSubmit = async () => {
  const success = await userStore.login(form.value)
  if (success) {
    router.push('/dashboard')
  }
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.email" type="email" placeholder="Email" required />
    <input v-model="form.password" type="password" placeholder="Password" required />
    <button type="submit">Login</button>
  </form>
</template>

4.4 持久化存储：使用 `pinia-plugin-persistedstate`

npm install pinia-plugin-persistedstate

// src/plugins/piniaPersist.ts
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

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

export default pinia

// src/stores/userStore.ts
export const useUserStore = defineStore('user', {
  state: () => ({
    currentUser: null as User | null,
    token: localStorage.getItem('auth_token') || ''
  }),
  persist: {
    key: 'user-store',
    paths: ['token', 'currentUser']
  }
})

✅ 最佳实践：

每个功能模块一个 store（userStore, settingsStore, cartStore）

避免在 store 中存放大量非响应式数据

使用 persist 插件实现关键状态持久化

所有 action 应返回 Promise，便于异步处理

不要在 store 内部直接操作 DOM

五、全面拥抱 TypeScript：类型安全从源头开始

5.1 类型定义的重要性

在企业级项目中，类型错误是导致运行时崩溃、调试困难的主要原因之一。通过 TypeScript 可以在编译期发现大部分问题。

5.2 标准类型定义文件结构

// src/types/user.ts
export interface User {
  id: string
  name: string
  email: string
  role: 'admin' | 'editor' | 'viewer'
  createdAt: string
  updatedAt: string
}

export interface UserFormData {
  name: string
  email: string
  role: 'admin' | 'editor' | 'viewer'
}

export type UserListResponse = {
  data: User[]
  total: number
  page: number
  size: number
}

// src/types/index.ts
export * from './user'
export * from './api'
export * from './form'

5.3 强类型组件通信

<!-- UserList.vue -->
<script setup lang="ts">
import type { User } from '@/types/user'

const props = defineProps<{
  users: User[]
  onEdit: (user: User) => void
  onDelete: (id: string) => void
}>()

const emit = defineEmits<{
  (e: 'update:user', user: User): void
  (e: 'reset'): void
}>()

const handleUpdate = (updatedUser: User) => {
  emit('update:user', updatedUser)
}

const handleDelete = (id: string) => {
  emit('delete', id)
}
</script>

5.4 泛型与高级类型应用

// src/utils/api.ts
export interface ApiResponse<T = any> {
  success: boolean
  data: T
  message?: string
  code?: number
}

export async function request<T>(
  url: string,
  options: RequestInit = {}
): Promise<ApiResponse<T>> {
  const response = await fetch(url, options)
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`)
  }
  return await response.json()
}

// 用法示例
interface Post {
  id: number
  title: string
  content: string
}

const post = await request<Post>('/api/posts/1')
console.log(post.data.title) // TS 推断为 string，安全

✅ 最佳实践：

所有接口、请求、响应都应定义明确类型

使用 interface 而非 type（除非需要联合/交叉类型）

避免使用 any，必要时使用 unknown

利用 as const 保证字面量类型精确性

合理使用泛型提升代码复用性

六、组件库封装：构建可复用的 UI 组件

6.1 组件设计原则

单一职责：每个组件只做一件事
高内聚低耦合：不依赖外部状态，通过 props/event 通信
可配置性强：支持 slot、props、theme 等定制
支持无障碍访问（a11y）

6.2 封装一个带验证的表单组件

<!-- src/components/FormInput.vue -->
<script setup lang="ts">
import { ref, computed } from 'vue'

const props = defineProps<{
  modelValue: string
  label: string
  placeholder?: string
  type?: string
  required?: boolean
  error?: string
  disabled?: boolean
  maxLength?: number
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
  (e: 'blur'): void
  (e: 'focus'): void
}>()

const inputRef = ref<HTMLInputElement | null>(null)

const handleChange = (e: Event) => {
  const target = e.target as HTMLInputElement
  emit('update:modelValue', target.value)
}

const handleBlur = () => {
  emit('blur')
}

const handleFocus = () => {
  emit('focus')
}

const hasError = computed(() => !!props.error)
const isRequired = computed(() => props.required || false)

// 限制长度
const validateLength = (value: string) => {
  if (props.maxLength && value.length > props.maxLength) {
    return `Max ${props.maxLength} characters`
  }
  return null
}
</script>

<template>
  <div class="form-input">
    <label :for="label" class="label">
      {{ label }}
      <span v-if="isRequired" class="required">*</span>
    </label>
    <input
      :id="label"
      ref="inputRef"
      :value="modelValue"
      :placeholder="placeholder"
      :type="type || 'text'"
      :disabled="disabled"
      :maxlength="maxLength"
      @input="handleChange"
      @blur="handleBlur"
      @focus="handleFocus"
      class="input"
      :class="{ 'error': hasError }"
    />
    <span v-if="hasError" class="error-message">{{ error }}</span>
    <span v-else-if="maxLength" class="char-counter">
      {{ modelValue.length }} / {{ maxLength }}
    </span>
  </div>
</template>

<style scoped>
.form-input {
  margin-bottom: 1rem;
}

.label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.required {
  color: red;
}

.input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.input.error {
  border-color: #d32f2f;
}

.error-message {
  color: #d32f2f;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.char-counter {
  font-size: 0.8rem;
  color: #666;
  margin-top: 0.25rem;
}
</style>

6.3 使用组件库

<!-- ProfileForm.vue -->
<script setup lang="ts">
import { ref } from 'vue'
import FormInput from '@/components/FormInput.vue'

const formData = ref({
  name: '',
  email: '',
  bio: ''
})

const errors = ref({
  name: '',
  email: ''
})

const validate = () => {
  const newErrors = { name: '', email: '' }
  if (!formData.value.name.trim()) newErrors.name = 'Name is required'
  if (!/^\S+@\S+\.\S+$/.test(formData.value.email)) {
    newErrors.email = 'Invalid email format'
  }
  errors.value = newErrors
  return !Object.values(newErrors).some(Boolean)
}

const handleSubmit = () => {
  if (validate()) {
    console.log('Submitting:', formData.value)
  }
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <FormInput
      v-model="formData.name"
      label="Full Name"
      required
      :error="errors.name"
      @blur="errors.name = ''"
    />
    <FormInput
      v-model="formData.email"
      label="Email"
      type="email"
      required
      :error="errors.email"
      @blur="errors.email = ''"
    />
    <textarea
      v-model="formData.bio"
      placeholder="Bio"
      class="input"
      rows="4"
    ></textarea>
    <button type="submit">Submit</button>
  </form>
</template>

✅ 最佳实践：

所有组件必须包含 v-model 支持

使用 defineProps / defineEmits 显式声明接口

提供 slot 以支持内容扩展

添加 aria-* 属性提升可访问性

使用 scoped CSS 防止样式污染

七、测试策略：从单元测试到 E2E 测试全覆盖

7.1 单元测试环境搭建（Jest + Vue Test Utils）

npm install --save-dev jest @vue/test-utils vue-jest @types/jest

// jest.config.js
module.exports = {
  preset: 'jest-preset-vue',
  transform: {
    '^.+\\.vue$': 'vue-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  testEnvironment: 'jsdom',
  collectCoverageFrom: [
    'src/**/*.{js,jsx,ts,tsx}',
    '!src/main.ts',
    '!src/plugins/**'
  ]
}

7.2 编写一个 Composable 单元测试

// src/composables/__tests__/useUserFetch.test.ts
import { useUserFetch } from '@/composables/useUserFetch'
import { vi, beforeEach, describe, it, expect } from 'vitest'
import { nextTick } from 'vue'

// Mock fetch
vi.mock('cross-fetch', () => ({
  __esModule: true,
  default: vi.fn()
}))

describe('useUserFetch', () => {
  beforeEach(() => {
    vi.clearAllMocks()
  })

  it('should fetch user when id changes', async () => {
    const mockData = { id: '1', name: 'Alice', email: 'alice@example.com' }
    const fetchMock = vi.mocked(fetch).mockResolvedValueOnce({
      ok: true,
      json: () => Promise.resolve(mockData)
    })

    const { user, fetchUser } = useUserFetch('1')

    await nextTick()
    expect(user.value).toEqual(mockData)
    expect(fetchMock).toHaveBeenCalledWith('/api/users/1')
  })

  it('should handle error gracefully', async () => {
    vi.mocked(fetch).mockRejectedValueOnce(new Error('Network error'))

    const { error, fetchUser } = useUserFetch('1')

    await fetchUser()

    expect(error.value).not.toBeNull()
    expect(error.value?.message).toBe('Network error')
  })
})

7.3 组件单元测试示例

<!-- src/components/__tests__/UserCard.test.vue -->
<script setup lang="ts">
import { shallowMount } from '@vue/test-utils'
import UserCard from '../UserCard.vue'
import { ref } from 'vue'

const wrapper = shallowMount(UserCard, {
  props: { id: '123' }
})

it('renders user name correctly', async () => {
  const mockUser = { id: '123', name: 'John Doe', email: 'john@example.com' }
  const fetchSpy = vi.spyOn(wrapper.vm, 'fetchUser').mockResolvedValueOnce()

  await wrapper.vm.fetchUser()

  expect(wrapper.find('.user-name').text()).toBe('John Doe')
  expect(fetchSpy).toHaveBeenCalled()
})
</script>

7.4 端到端测试（Cypress）

npm install --save-dev cypress

// cypress/e2e/login.cy.js
describe('Login Flow', () => {
  beforeEach(() => {
    cy.visit('/login')
  })

  it('should login successfully', () => {
    cy.get('[name="email"]').type('admin@example.com')
    cy.get('[name="password"]').type('password123')
    cy.get('form').submit()

    cy.url().should('include', '/dashboard')
    cy.contains('Welcome, Admin').should('be.visible')
  })

  it('should show validation errors', () => {
    cy.get('form').submit()
    cy.contains('Email is required').should('be.visible')
    cy.contains('Password is required').should('be.visible')
  })
})

✅ 最佳实践：

每个 Composable 都应有对应的测试

组件测试覆盖率目标 ≥ 85%

使用 shallowMount 进行轻量测试，mount 用于完整渲染

Cypress 用于关键路径测试（登录、注册、提交表单）

设置 CI/CD 自动运行测试

八、总结：企业级项目的完整技术栈蓝图

模块	推荐方案
核心框架	Vue 3 + `<script setup>`
状态管理	Pinia + `persist` 插件
类型系统	TypeScript + `strict` 模式
逻辑复用	Composables（`useXxx`）
UI 组件	自研组件库 + SCSS + a11y
测试	Jest（单元） + Cypress（E2E）
构建工具	Vite + Rollup + ESLint + Prettier

九、附录：推荐配置文件

`tsconfig.json`

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

`.eslintrc.js`

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  parser: 'vue-eslint-parser

Vue 3企业级项目最佳实践：Composition API状态管理、TypeScript集成与单元测试全覆盖指南

Vue 3企业级项目最佳实践：Composition API状态管理、TypeScript集成与单元测试全覆盖指南

一、引言：企业级项目对Vue 3的核心诉求

二、深入理解 Composition API：从语法到架构

2.1 为什么选择 Composition API？

2.2 正确使用 `setup()` 和 `<script setup>`

✅ 推荐写法：`<script setup>`

❌ 避免的反模式

三、构建可复用的 Composables：逻辑抽象的最佳实践

3.1 什么是 Composable？

3.2 创建一个标准 Composable：`useUserFetch`

3.3 在组件中使用

四、状态管理：使用 Pinia 实现结构化全局状态

4.1 为什么选择 Pinia？

4.2 创建一个模块化的 Store

4.3 从组件中使用 Store

4.4 持久化存储：使用 `pinia-plugin-persistedstate`

五、全面拥抱 TypeScript：类型安全从源头开始

5.1 类型定义的重要性

5.2 标准类型定义文件结构

5.3 强类型组件通信

5.4 泛型与高级类型应用

六、组件库封装：构建可复用的 UI 组件

6.1 组件设计原则

6.2 封装一个带验证的表单组件

6.3 使用组件库

七、测试策略：从单元测试到 E2E 测试全覆盖

7.1 单元测试环境搭建（Jest + Vue Test Utils）

7.2 编写一个 Composable 单元测试

7.3 组件单元测试示例

7.4 端到端测试（Cypress）

八、总结：企业级项目的完整技术栈蓝图

九、附录：推荐配置文件

`tsconfig.json`

`.eslintrc.js`

相似文章

评论 (0)

Vue 3企业级项目最佳实践：Composition API状态管理、TypeScript集成与单元测试全覆盖指南

Vue 3企业级项目最佳实践：Composition API状态管理、TypeScript集成与单元测试全覆盖指南

一、引言：企业级项目对Vue 3的核心诉求

二、深入理解 Composition API：从语法到架构

2.1 为什么选择 Composition API？

2.2 正确使用 setup() 和 <script setup>

✅ 推荐写法：<script setup>

❌ 避免的反模式

三、构建可复用的 Composables：逻辑抽象的最佳实践

3.1 什么是 Composable？

3.2 创建一个标准 Composable：useUserFetch

3.3 在组件中使用

四、状态管理：使用 Pinia 实现结构化全局状态

4.1 为什么选择 Pinia？

4.2 创建一个模块化的 Store

4.3 从组件中使用 Store

4.4 持久化存储：使用 pinia-plugin-persistedstate

五、全面拥抱 TypeScript：类型安全从源头开始

5.1 类型定义的重要性

5.2 标准类型定义文件结构

5.3 强类型组件通信

5.4 泛型与高级类型应用

六、组件库封装：构建可复用的 UI 组件

6.1 组件设计原则

6.2 封装一个带验证的表单组件

6.3 使用组件库

七、测试策略：从单元测试到 E2E 测试全覆盖

7.1 单元测试环境搭建（Jest + Vue Test Utils）

7.2 编写一个 Composable 单元测试

7.3 组件单元测试示例

7.4 端到端测试（Cypress）

八、总结：企业级项目的完整技术栈蓝图

九、附录：推荐配置文件

tsconfig.json

.eslintrc.js

相似文章

评论 (0)

2.2 正确使用 `setup()` 和 `<script setup>`

✅ 推荐写法：`<script setup>`

3.2 创建一个标准 Composable：`useUserFetch`

4.4 持久化存储：使用 `pinia-plugin-persistedstate`

`tsconfig.json`

`.eslintrc.js`