前端项目组成

一、前端项目常见模块及功能（以 Vue/React 通用结构为例）

前端项目的模块本质是「按功能拆分的代码文件/文件夹」，就像盖房子的「砖、梁、窗」各司其职：

模块类型	功能说明（大白话）	举个例子
pages（页面）	对应浏览器里能看到的完整页面（如首页、详情页）	HomePage.vue（首页）、DetailPage.jsx（详情页）
components（组件）	可复用的「小零件」（按钮、卡片、弹窗等），用来拼页面	Button.vue（按钮）、Card.jsx（卡片）
api（接口）	专门和后端交互的代码（发请求、拿数据）	userApi.js（用户相关接口：登录、获取信息）
utils（工具）	通用功能代码（格式化时间、处理数据、判断设备等）	formatTime.js（把时间戳转成「2024-07-25」）
store（状态）	存全局数据的「共享仓库」（如用户登录信息、购物车数据）	Vue 用 Vuex/Pinia，React 用 Redux/Zustand
router（路由）	控制页面跳转（比如点击「首页」跳转到 /home）	定义 /home 对应 HomePage 页面

二、模块之间的关系：谁依赖谁？

模块间的关系就像「组装机器」—— 大零件依赖小零件，小零件可能依赖更小的零件：

1. pages 依赖 components
   页面是「大容器」，需要用组件拼起来。比如 HomePage 可能包含 Banner 组件（顶部轮播）、ProductList 组件（商品列表）。

2. pages/components 依赖 api
   页面/组件要显示数据（如商品列表），得通过 api 模块向后端要数据。比如 ProductList 组件会调用 productApi.getList() 拿商品数据。

3. pages/components 依赖 utils
   拿到数据后可能需要处理（比如时间戳转成正常时间），就会调用 utils 里的工具函数。比如 formatTime(new Date())。

4. pages/components 依赖 store
   全局共享的数据（如用户昵称）存在 store 里，页面/组件可以直接取来用。比如 store.userInfo.nickname。

5. router 关联 pages
   路由模块定义「访问哪个地址显示哪个页面」，比如 router 里配置 { path: '/home', component: HomePage }，就意味着访问 /home 时显示 HomePage 页面。

三、模块间怎么调用？（核心：import 引入 + 直接用）

调用本质是「我需要你的功能，就把你引进来用」，和「借工具干活」一样：

1. 页面里用组件（pages 调用 components）

2. 组件里调接口（components 调用 api）

// 比如在 UserCard.jsx 组件里拿用户信息
import { getUserInfo } from '../api/userApi'; // 引入接口函数

function UserCard() {
  // 组件加载时，调用 api 拿数据
  useEffect(() => {
    // 直接调用 api 里的函数
    getUserInfo().then(data => {
      console.log('拿到用户数据：', data);
    });
  }, []);

  return 
用户信息卡片
;
}

3. 接口里用工具函数（api 调用 utils）

// api/userApi.js 里处理请求参数
import { formatParams } from '../utils/format'; // 引入工具函数

// 登录接口
export function login(phone, password) {
  // 调用工具函数格式化参数（比如给参数加个时间戳）
  const params = formatParams({ phone, password }); 
  return axios.post('/login', params); // 发请求
}

四、方法内部的调用逻辑（以「用户登录」为例串一遍）

拿「用户点击登录按钮 → 登录成功 → 显示用户信息」这个流程，看代码是怎么一步步调用的：

1. 组件里的方法（触发点）：
   LoginButton.vue 组件里的 handleLogin 方法（用户点击按钮时执行）：

   import { loginApi } from '../api/userApi'; // 引入登录接口
   import { setToken } from '../utils/auth'; // 引入存 token 的工具
   
   methods: {
     handleLogin() {
       // 1. 调用 api 里的登录接口，传账号密码
       loginApi(this.phone, this.password).then(res => {
         // 2. 登录成功后，调用工具函数存 token
         setToken(res.token); 
         // 3. 跳转到首页（调用路由方法）
         this.$router.push('/home'); 
       });
     }
   }
   

2. 接口方法（中间层）：
   api/userApi.js 里的 loginApi 方法：

   import axios from 'axios';
   import { showError } from '../utils/alert'; // 引入弹窗工具
   
   export function loginApi(phone, password) {
     return axios.post('/api/login', { phone, password })
       .catch(err => {
         // 出错时调用工具函数显示错误弹窗
         showError('登录失败，请检查账号密码'); 
       });
   }
   

3. 工具方法（底层支持）：
   utils/auth.js 里的 setToken 方法（单纯存数据）：

   export function setToken(token) {
     // 把 token 存在浏览器本地存储里
     localStorage.setItem('token', token);
   }
   

总结：快速上手的小技巧

1. 先找 pages 文件夹，打开一个页面文件（比如首页），看它引入了哪些 components 和 api，顺着「引入关系」找代码。
2. 遇到不认识的函数，看它的 import 路径，就能知道来自哪个模块。
3. 从一个简单功能（比如点击按钮）入手，用「断点调试」一步步跟代码（浏览器 F12 → Sources 面板），看它调用了哪些方法。