【前端日记Day02】新人报道 Vue 项目组第二天：项目上手篇

新人报道 Vue 项目组第二天：熟悉项目结构的血泪史 😂

📅 第二天目标：开组会熟悉项目结构 （认真听课）

组长：在 Vue 项目开发中，尤其是使用 Vue CLI 或 Vite + Vue3（通过 Vite 创建的 Vue 项目） 构建的现代前端项目中，开发团队日常编写最多的文件夹结构通常是以下几个：

🧱 Vue 项目中最常写的几个文件夹（目录结构详解）

以下是以一个典型的 Vue 项目为例，列出开发者最常打交道、写得最多代码的文件夹结构。

1. src/：项目源码主目录（核心战场）

这是整个项目的“心脏”，几乎所有的业务代码都在这里。主要包含以下子目录和文件：

✅ 常见子目录：

🔧 常见文件：

2. views/：页面组件集中地（高频操作）

这个文件夹存放的是与路由一一对应的页面组件。

示例结构：

views/
├── dashboard/
│   └── index.vue
├── user/
│   ├── list.vue
│   └── detail.vue
├── login/
│   └── index.vue
└── error/
    └── 404.vue

💡 开发者每天可能都会在这个目录下新建页面、修改页面逻辑、调试UI问题。

3. components/：组件工厂（高频率复用）

存放各种可复用的组件，例如按钮、表格、弹窗、搜索框等。

示例结构：

components/
├── BaseButton.vue
├── TableList.vue
├── SearchInput.vue
├── ModalDialog.vue
├── BreadCrumb.vue
└── LoadingSpinner.vue

📌 优点：提高代码复用性、统一风格
⚠️ 注意：避免组件过度拆分，保持合理的粒度

4. services/ 或 api/：接口调用中心（前后端联调核心）

这个文件夹用于封装所有对后端的 HTTP 请求，通常基于 Axios 或 Fetch。

示例结构：

services/
├── userApi.js
├── productApi.js
├── orderApi.js
└── request.js  // 封装统一拦截器

示例代码（request.js）：

import axios from 'axios';

const service = axios.create({
  baseURL: process.env.VUE_APP_API,
  timeout: 5000
});

// 请求拦截器
service.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers['Authorization'] = 'Bearer ' + token;
  }
  return config;
});

// 响应拦截器
service.interceptors.response.use(response => {
  return response.data;
}, error => {
  console.error('API Error:', error);
  return Promise.reject(error);
});

export default service;

5. router/：路由管理中枢（Vue Router）

Vue 项目中的路由配置通常位于此目录。

示例结构：

router/
└── index.js

示例代码（Vue3 + Vite）：

import { createRouter, createWebHistory } from 'vue-router'
import Dashboard from '../views/dashboard/index.vue'

const routes = [
  {
    path: '/',
    name: 'Dashboard',
    component: Dashboard
  },
  {
    path: '/user/list',
    name: 'UserList',
    component: () => import('../views/user/list.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

6. store/ 或 pinia/：状态管理仓库（复杂项目必备）

• Vue2 中常用 Vuex
• Vue3 Composition API 中推荐使用 Pinia

示例结构（Pinia）：

pinia/
├── modules/
│   ├── userStore.js
│   └── cartStore.js
└── index.js

7. utils/：工具箱（开发效率提升利器）

存放通用工具函数，如格式化时间、深拷贝、权限判断等。

示例结构：

utils/
├── formatTime.js
├── deepClone.js
├── validate.js
└── auth.js

8. assets/：静态资源库（非打包资源）

• 图片、图标、字体文件等
• 一般不会经过 Webpack 处理的小型静态资源

9. layout/：布局组件（大项目标配）

常见的布局包括：

• DefaultLayout.vue（带侧边栏）
• EmptyLayout.vue（无布局页面，如登录页）
• Header.vue / Sidebar.vue / Footer.vue

🔚 总结：Vue 项目中最常写的文件夹列表

掌握这些文件夹的组织方式和职责划分，不仅能让你写出结构清晰、易于维护的 Vue 项目，还能大大提升团队协作效率！

📌 推荐阅读：

• Vue 官方文档
• Vue Router 文档
• Pinia 官方文档
• Axios 文档
• Vue3 + Vite 项目最佳实践

如果你是刚入行的程序员、正在找工作的同学，或者想提升工作效率的工程师，强烈建议你熟练掌握这些常见文件夹的使用方式，它们将成为你职业生涯中最重要的武器之一。💪