Vue3项目结构与模块化开发实践指南

1. Vue3项目结构全景解读

第一次打开一个Vue3项目时，很多人会被各种目录和文件搞得晕头转向。经过三年多的Vue3实战开发，我发现理解其代码结构的关键在于把握"模块化设计"和"组合式API"这两大核心理念。与Vue2的选项式API不同，Vue3的目录结构更强调功能逻辑的聚合，而非技术类型的分类。

典型的Vue3项目包含以下核心目录（以Vite构建工具为例）：

code复制├── public/                # 静态资源
├── src/
│   ├── assets/            # 编译处理的静态资源
│   ├── components/        # 公共组件
│   ├── composables/       # 组合式函数
│   ├── router/            # 路由配置
│   ├── stores/            # Pinia状态管理
│   ├── styles/            # 全局样式
│   ├── utils/             # 工具函数
│   ├── views/             # 页面级组件
│   ├── App.vue            # 根组件
│   └── main.js            # 应用入口

2. 核心文件职责解析

2.1 入口文件：main.js的进化

现代Vue3的入口文件已经简化为：

javascript复制import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

关键变化在于：

• 不再直接引入Vue构造函数
• 使用工厂函数createApp创建应用实例
• 全局API改为实例方法（如app.component()）

2.2 单文件组件(SFC)结构

典型的App.vue结构示例：

vue复制<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <div>{{ count }}</div>
</template>

<style scoped>
div { color: red }
</style>

Vue3的SFC有三个重要改进：

1. <script setup>语法糖简化组合式API写法
2. 模板支持多根节点
3. style支持v-bind注入变量

3. 模块化架构实践

3.1 组件组织策略

推荐按功能而非类型划分组件：

code复制components/
├── User/
│   ├── UserCard.vue
│   ├── UserForm.vue
│   └── UserList.vue
└── Product/
    ├── ProductCard.vue
    └── ProductFilter.vue

3.2 组合式函数的最佳实践

在composables目录下创建可复用的逻辑：

javascript复制// useMousePosition.js
import { onMounted, onUnmounted, ref } from 'vue'

e