第四阶段：Vue 进阶与生态整合（第 47 天）(Vue 项目目录结构解析：每个文件夹的作用与规范)

Vue 项目目录结构解析

标准 Vue 项目目录结构示例

以下是一个符合规范的 Vue 项目目录结构，常见于 Vue CLI 或 Vite 生成的项目中：

复制代码

src/
├── assets/               # 静态资源（图片、字体等）
├── components/           # 公共组件（大驼峰命名，如 UserCard.vue）
├── composables/          # Vue 3 组合式函数（小驼峰命名）
├── router/               # 路由配置（index.js）
├── store/                # Vuex/Pinia 状态管理
├── utils/                # 工具函数（小驼峰命名，如 formatDate.js）
├── views/                # 页面级组件（大驼峰命名，如 HomeView.vue）
├── api/                  # 接口封装（模块化拆分，如 userApi.js）
├── styles/               # 全局样式（SCSS/CSS）
├── App.vue               # 根组件
└── main.js               # 应用入口文件

核心文件夹与文件作用

assets

存放静态资源（图片、图标、字体等），通常通过相对路径引用。

components

复用性高的 UI 组件，命名采用大驼峰（PascalCase），例如：

vue 复制代码

<!-- components/UserCard.vue -->
<template>
  <div class="user-card">{{ userName }}</div>
</template>

views

页面级组件，与路由直接关联。命名规范同组件，例如 HomeView.vue。

api

接口封装模块化，按功能拆分文件：

javascript 复制代码

// api/userApi.js
export const login = (data) => axios.post('/api/login', data);
export const getUser = (id) => axios.get(`/api/user/${id}`);

utils

工具函数库，命名采用小驼峰（camelCase），例如：

javascript 复制代码

// utils/formatDate.js
export const formatDate = (timestamp) => new Date(timestamp).toLocaleString();

router

路由配置集中管理，通常导出 createRouter 实例：

javascript 复制代码

// router/index.js
const routes = [{ path: '/', component: HomeView }];
export default createRouter({ history: createWebHistory(), routes });

编码规范与分层原则

命名规范

组件：大驼峰（MyComponent.vue）
工具函数/组合式函数：小驼峰（useFetchData.js）
接口文件：功能前缀 + Api（userApi.js）

目录分层

横向按功能划分（如 api、components）
纵向按模块划分（如 user 相关接口、组件、状态集中管理）

示例：接口封装规范

模块化接口文件

javascript 复制代码

// api/userApi.js
import axios from '@/utils/request';

export default {
  login: (data) => axios.post('/login', data),
  getProfile: (id) => axios.get(`/user/${id}`),
};

调用示例

javascript 复制代码

import userApi from '@/api/userApi';

userApi.login({ username: 'admin', password: '123' });

关键总结

职责边界明确

components：纯 UI 展示
views：路由关联页面
api：接口逻辑隔离
utils：纯函数工具

可维护性提升

命名一致性强
功能模块高内聚
避免多层嵌套目录

通过规范化的目录结构和编码约定，可显著降低团队协作成本，增强代码可读性和可扩展性。