my-vue3-project/
├── src/
│   ├── assets/                      # 靜態(tài)資源（圖片、字體等）
│   ├── components/
│   │   ├── common/                  # 通用UI組件（跨項(xiàng)目復(fù)用，無業(yè)務(wù)邏輯）
│   │   │   └── BaseButton.vue
│   │   └── biz/                     # 通用業(yè)務(wù)組件（跨頁面復(fù)用，含業(yè)務(wù)邏輯）
│   │       └── BizUserCard.vue
│   ├── composables/                 # 組合式函數(shù)（可復(fù)用的狀態(tài)邏輯）
│   │   └── useUser.ts
│   ├── layouts/                     # 布局組件（頁面整體結(jié)構(gòu)）
│   │   ├── default.vue
│   │   └── components/              # 布局專用組件（僅布局層使用）
│   │       └── AppHeader.vue
│   ├── pages/                       # 頁面組件（路由對(duì)應(yīng)，kebab-case命名）
│   │   ├── user-profile.vue
│   │   └── user/                    # 頁面模塊
│   │       ├── list.vue
│   │       └── components/          # 頁面專用組件（僅當(dāng)前模塊使用）
│   │           └── UserFilter.vue
│   ├── router/                      # 路由配置（管理頁面路由）
│   │   ├── index.ts
│   │   └── user-routes.ts
│   ├── stores/                      # Pinia狀態(tài)管理（全局共享狀態(tài)）
│   │   └── userStore.ts
│   ├── services/                    # API服務(wù)層（封裝后端接口調(diào)用）
│   │   └── userService.ts
│   ├── utils/                       # 工具函數(shù)（純函數(shù)，無副作用）
│   │   ├── formatDate.ts
│   │   └── validateEmail.ts
│   ├── types/                       # TypeScript類型定義（接口、枚舉等）
│   │   ├── User.ts
│   │   └── api.ts
│   ├── styles/                      # 全局樣式（變量、混入、重置樣式）
│   │   └── global.scss
│   ├── App.vue
│   └── main.ts
├── tests/
│   └── unit/                        # 單元測(cè)試（與src目錄結(jié)構(gòu)對(duì)應(yīng)）
│       ├── components/
│       └── utils/
└── package.json

<script setup lang="ts">
// 1. 類型導(dǎo)入
import type { UserInfo } from '@/types/User'
// 2. 第三方庫
import { ElMessage } from 'element-plus'
// 3. 組件導(dǎo)入
import BaseButton from '@/components/common/BaseButton.vue'
// 4. 工具/組合式函數(shù)
import { useUser } from '@/composables/useUser'
// 5. Props
interface Props {
  userId: string
  title?: string
}
const props = withDefaults(defineProps<Props>(), {
  title: '默認(rèn)'
})
// 6. Emits
const emit = defineEmits<{
  (e: 'update', user: UserInfo): void
}>()
// 7. 響應(yīng)式數(shù)據(jù)
const loading = ref(false)
// 8. 計(jì)算屬性
const displayName = computed(() => user.value?.name)
// 9. 方法
async function fetchUser() {}
// 10. 生命周期
onMounted(() => {})
// 11. 暴露
defineExpose({ refresh: fetchUser })
</script>
<template>
  <!-- 自定義組件：PascalCase；第三方：kebab-case -->
  <BaseButton @click="handleClick" />
  <el-button type="primary" />
</template>
<style scoped lang="scss">
// BEM命名
.user-card {
  &__header {}
  &--active {}
}
</style>

// composables/useCounter.ts
export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const doubled = computed(() => count.value * 2)
  function increment() { count.value++ }
  function reset() { count.value = initialValue }
  return { count, doubled, increment, reset }
}

stores/
├── userStore.ts
├── cartStore.ts
└── productStore.ts

// stores/userStore.ts
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
  state: () => ({ 
    name: '', 
    isLoggedIn: false 
  }),
  getters: { 
    displayName: (state) => state.name || '游客' 
  },
  actions: {
    async login(email: string, password: string) {
      // 登錄邏輯
    },
    logout() { 
      this.$reset() 
    }
  }
})

<script setup>
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/userStore'
const userStore = useUserStore()
// 狀態(tài)用 storeToRefs 解構(gòu)保持響應(yīng)性
const { name, displayName } = storeToRefs(userStore)
// actions 直接解構(gòu)
const { login, logout } = userStore
</script>

services/
├── userService.ts
├── productService.ts
└── api/
    ├── client.ts       # axios實(shí)例配置
    └── interceptors.ts # 攔截器

// services/userService.ts
import request from './api/client'
import type { UserInfo, LoginParams } from '@/types/User'
export const userService = {
  async getUser(id: string): Promise<UserInfo> {
    const { data } = await request.get(`/api/users/${id}`)
    return data
  },
  async login(params: LoginParams): Promise<{ token: string }> {
    const { data } = await request.post('/api/users/login', params)
    return data
  }
}

utils/
├── formatDate.ts       # 日期格式化
├── formatCurrency.ts   # 貨幣格式化
├── validateEmail.ts    # 郵箱驗(yàn)證
└── storage.ts          # 本地存儲(chǔ)封裝

// utils/formatDate.ts
export function formatDate(date: Date, format = 'YYYY-MM-DD'): string {
  const d = new Date(date)
  const year = d.getFullYear()
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  return format
    .replace('YYYY', String(year))
    .replace('MM', month)
    .replace('DD', day)
}
// utils/validateEmail.ts
export function validateEmail(email: string): boolean {
  const emailRegex = /^[^\s@]+@([^\s@.,]+\.)+[^\s@.,]{2,}$/
  return emailRegex.test(email)
}

types/
├── User.ts             # 用戶相關(guān)類型
├── Product.ts          # 商品相關(guān)類型
├── api.ts              # API通用類型
└── global.d.ts         # 全局類型聲明

// types/User.ts
export interface UserInfo {
  id: string
  name: string
  email: string
  role: UserRole
}
export enum UserRole { 
  Admin = 'admin', 
  User = 'user' 
}
// types/api.ts
export interface ApiResponse<T = unknown> {
  code: number
  message: string
  data: T
}

// ? 正確：使用 type 關(guān)鍵字導(dǎo)入純類型
import type { UserInfo } from '@/types/User'
// ? 正確：枚舉需要值導(dǎo)入
import { UserRole } from '@/types/User'

tests/unit/
├── components/
│   ├── common/
│   │   └── BaseButton.spec.ts
│   └── biz/
│       └── BizUserCard.spec.ts
├── composables/
│   └── useCounter.spec.ts
├── stores/
│   └── userStore.spec.ts
├── services/
│   └── userService.spec.ts
└── utils/
    └── formatDate.spec.ts

// tests/unit/components/common/BaseButton.spec.ts
import { mount } from '@vue/test-utils'
import BaseButton from '@/components/common/BaseButton.vue'
describe('BaseButton', () => {
  it('renders correctly', () => {
    const wrapper = mount(BaseButton, { 
      slots: { default: 'Click' } 
    })
    expect(wrapper.text()).toBe('Click')
  })
  it('emits click event when clicked', async () => {
    const wrapper = mount(BaseButton)
    await wrapper.trigger('click')
    expect(wrapper.emitted('click')).toBeTruthy()
  })
})

// tests/unit/composables/useCounter.spec.ts
import { useCounter } from '@/composables/useCounter'
describe('useCounter', () => {
  it('initializes with default value', () => {
    const { count } = useCounter()
    expect(count.value).toBe(0)
  })
  it('increments count correctly', () => {
    const { count, increment } = useCounter(5)
    increment()
    expect(count.value).toBe(6)
  })
})

// tests/unit/utils/formatDate.spec.ts
import { formatDate } from '@/utils/formatDate'
describe('formatDate', () => {
  it('formats date with default format', () => {
    const date = new Date(2024, 0, 15)
    expect(formatDate(date)).toBe('2024-01-15')
  })
  it('formats date with custom format', () => {
    const date = new Date(2024, 0, 15)
    expect(formatDate(date, 'YYYY/MM/DD')).toBe('2024/01/15')
  })
})

<script lang="ts" setup>
import type { InputInstance, InputProps } from 'element-plus'
import { getCurrentInstance } from 'vue'
import type { ExtractPropTypes } from 'vue'
// 1. 定義 Props 類型（繼承 Element Plus Input 的所有屬性）
export interface CustomInputProps extends ExtractPropTypes<InputProps> {
  title?: string  // 自定義標(biāo)題
}
// 2. 定義實(shí)例類型（繼承原始實(shí)例 + 自定義方法）
export interface CustomInputInstance extends InputInstance {
  someClick: () => void
}
defineOptions({
  inheritAttrs: false  // 手動(dòng)控制屬性透?jìng)?
})
// 3. Props 默認(rèn)值
const props = withDefaults(defineProps<CustomInputProps>(), {
  title: '自定義封裝的Input',
  clearable: true  // 覆蓋默認(rèn)值為 true
})
// 4. 事件定義
const emit = defineEmits<{
  (e: 'titleClick'): void
}>()
const vm = getCurrentInstance()
// 5. ref 回調(diào)：合并原始實(shí)例和自定義方法
function changeRef(inputInstance: Record<string, any> | null) {
  if (vm) {
    vm.exposeProxy = vm.exposed = Object.assign(inputInstance || {}, {
      someClick
    }) as CustomInputInstance
  }
}
function someClick() {
  console.log('someClick')
}
function handleTitleClick() {
  emit('titleClick')
}
// 6. 暴露合并后的實(shí)例
defineExpose((vm?.exposeProxy || {}) as CustomInputInstance)
</script>
<template>
  <div class="custom-input">
    <div @click="handleTitleClick">{{ title }}</div>
    <!-- 透?jìng)魉袑傩院筒宀?-->
    <el-input :ref="changeRef" v-bind="{ ...$attrs, ...props }">
      <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
        <slot :name="name" v-bind="slotProps" />
      </template>
    </el-input>
  </div>
</template>

<script lang="ts" setup>
import { getCurrentInstance, h } from 'vue'
import { ElInput } from 'element-plus'
import type { InputInstance, InputProps } from 'element-plus'
import type { ExtractPropTypes } from 'vue'
export interface CustomInputProps extends ExtractPropTypes<InputProps> {
  title?: string
}
export interface CustomInputInstance extends InputInstance {
  someClick: () => void
}
defineOptions({
  inheritAttrs: false
})
const props = withDefaults(defineProps<CustomInputProps>(), {
  title: '自定義封裝的Input',
  clearable: true
})
const emit = defineEmits<{
  (e: 'titleClick'): void
}>()
const vm = getCurrentInstance()
function changeRef(inputInstance: Record<string, any> | null) {
  if (vm) {
    vm.exposeProxy = vm.exposed = Object.assign(inputInstance || {}, {
      someClick
    })
  }
}
function someClick() {
  console.log('someClick')
}
function handleTitleClick() {
  emit('titleClick')
}
defineExpose((vm?.exposeProxy || {}) as CustomInputInstance)
</script>
<template>
  <div class="custom-input">
    <div @click="handleTitleClick">{{ title }}</div>
    <!-- h 函數(shù)渲染，自動(dòng)處理插槽透?jìng)?-->
    <component :is="h(ElInput, { ...$attrs, ...props, ref: changeRef }, $slots)" />
  </div>
</template>