看懂真实项目的前端工程

真实公司项目和玩具 demo 不一样：有 TypeScript 类型、有全局状态管理、接口都被封装在 api 目录里。看懂这三样，你才能在大项目里定位代码、做小修改。

建议 3 周前提：会用 Vue 3 目标：定位并小改功能页面

本页目录

① TypeScript 基础 ② Pinia 状态管理 ③ 读懂 api 目录封装 ④ 复杂组件套路 ⑤ 遇到再学的插件 ✅ 阶段验收

🧭先说人话：这一阶段跨过什么坎

玩具项目你已经会了。真实项目会多出三样让新手发怵的东西：看着吓人的 TS 类型、到处传数据的状态管理、层层封装的接口调用。这阶段就是把这三个「拦路虎」变成「纸老虎」。

比喻：前两阶段是在停车场练车，这阶段是上真实道路——车流多了、规则多了，但只要认识路标，一样能开。

TypeScript 基础（看得懂就行）

TS = JavaScript + 类型标注。目标是「看懂」，不是「精通」，别怕。

🏷️为什么要给数据「贴标签」

比喻：TS 像行李箱上的标签——写明「这是数字、那是文字」。写代码时如果你把文字塞进数字盒子，编辑器当场标红提醒，不用等运行崩了才发现。

// 变量后面加 : 类型，就是在贴标签
let name: string = '张三';    // 文字
let age: number = 25;        // 数字
let vip: boolean = true;      // 是 / 否

// 函数：参数和返回值都能标类型
function add(a: number, b: number): number {
  return a + b;
}

interface：描述一个对象长啥样

// interface = 一张「数据结构说明书」
interface User {
  id: number;
  name: string;
  vip?: boolean;   // 问号 = 这个字段可有可无
}

const u: User = { id: 1, name: '张三' };

新手心态：看到一堆 : string、interface、<T> 别慌，它们只是「注释加强版」，帮你看清数据结构。看不懂的类型选中问 AI，秒懂。

Pinia 状态管理

解决「一份数据，很多页面都要用」的问题。（老项目里叫 Vuex，思路一样）

🏦状态管理 = 全公司共用的公告栏

比如「当前登录用户」，导航栏要显示头像、订单页要用他的 id、设置页要改他的资料。如果每个页面各存一份，就会乱、会对不上。

比喻：Pinia 是公司大厅的公告栏。用户信息只贴一份在公告栏上，谁要用谁去看；一处更新，所有人看到的都是最新的。

// 定义一个「用户仓库」store
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', () => {
  const name = ref('');        // 存的数据
  function login(n) { name.value = n; }  // 改数据的方法
  return { name, login };
});

// 任意组件里用它
const userStore = useUserStore();
console.log(userStore.name);   // 读
userStore.login('张三');       // 改，所有用到的地方自动更新

什么时候需要它：数据只在一个组件里用 → 不用 Pinia；跨多个页面共享（登录信息、购物车、主题）→ 放 Pinia。

读懂 api 目录封装

真实项目不会在页面里到处写 axios，而是把接口统一收进 api/ 目录。看懂它，是读懂项目的关键。

📇为什么要封装接口

比喻：与其每个店员都自己记快递公司电话，不如前台统一登记一本通讯录。所有接口写在 api/ 目录里，页面只管「翻通讯录打电话」，地址变了改一处就行。

// api/user.ts —— 把接口封装成函数
import request from '@/utils/request';  // 项目统一封装的 axios

export function getUserList(params) {
  return request({ url: '/user/list', method: 'get', params });
}
export function addUser(data) {
  return request({ url: '/user', method: 'post', data });
}

// 页面里调用，干净利落
import { getUserList } from '@/api/user';
const res = await getUserList({ page: 1 });

顺藤摸瓜大法：看到页面调用 getUserList → 去 api/ 目录找到它 → 看到它请求的 url: '/user/list' → 记住这个地址，第四阶段你就能拿它去后端找对应代码。这条线打通，你就理解全栈是怎么串起来的。

@ 是路径别名，代表 src 目录。@/api/user 就是 src/api/user。

后台常见的复杂组件套路

中后台页面 90% 是「表格 + 分页 + 弹窗表单」，摸透这套路，大半个后台就懂了。

📋「增删改查」页面的经典结构

搜索栏 → 表格展示列表 → 分页 → 点「新增/编辑」弹出表单 → 表单校验 → 提交调接口 → 刷新表格

表格分页：el-table 显示数据，el-pagination 翻页，翻页时重新请求接口。
弹窗：el-dialog，一个变量 true/false 控制它开关。
表单校验：el-form + 规则，必填项没填就红字拦住，不让提交。

学法：找到项目里任意一个「列表页」，从上到下读一遍，你会发现所有后台页面几乎都是这个模板换皮。看懂一个 = 看懂一片。

遇到再学的插件（先跳过）

这些不是入门必需，真碰到那个需求时，查文档 + 抄示例即可。

插件	干嘛的	优先级
ECharts	画折线图 / 柱状图 / 饼图	用到再学
富文本编辑器	像 Word 一样编辑内容	用到再学
地图组件	展示位置、选点	用到再学
文件上传 / 导出 Excel	上传图片、导报表	用到再学