前端进阶：TS + Pinia + 工程化

大约 8 分钟

前端进阶：TS + Pinia + 工程化

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

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

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

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

先弄一个真实的练手项目

这一阶段不用你从零写，而是读别人的成熟项目。好消息：GitHub 上有大量免费开源的后台管理模板，克隆下来就是现成的「真实项目」。

克隆一个开源后台模板

去 GitHub / Gitee 搜关键词 vue3 admin、后台管理模板，挑一个 star 高、用 Vue3 + TypeScript + Element Plus 的（这类模板很多，如 vue-pure-admin、soybean-admin 等）。然后用《打地基》里学的 Git：

git clone 项目地址       # 把它整个下载下来
cd 项目文件夹
npm install              # 装依赖（这类项目依赖多，多等一会）
npm run dev              # 跑起来，浏览器打开看后台长啥样

这就是本阶段的「教材」

一个能跑、有登录、有菜单、有一堆增删改查页面的真实后台。下面每学一个知识点，都回到它里面去「找出对应的代码」，边看边验证。

提示

跑不起来很正常：Node 版本不对、依赖装失败都可能。把报错发给 AI，或换一个更简单的模板。别死磕一个。

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，秒懂。具体见 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' → 记住这个地址，后端速通的《Java 后端》篇你就能拿它去后端找对应代码。这条线打通，你就理解全栈是怎么串起来的。

提示

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

后台常见的复杂组件套路

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

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

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

提示

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

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

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

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

别在这浪费时间

这些学了不用马上就忘。记住「有这么个东西、大概能干啥」，真需要时再回来抄示例。

动手实践 · 在真实项目里「顺藤摸瓜 + 小改」

这一阶段的核心能力是「读懂 + 定位 + 小改」，不是从零写。就在你克隆的那个后台项目里做。

跟着做（重在「找」和「改」）

选一个页面当目标。在跑起来的后台里，随便找一个列表页面（比如「用户管理」），记住它上面显示的某个中文字（如某个表头「用户名」）。
全局搜索定位。回 VS Code，Ctrl + Shift + F 搜那个中文字，直接跳到对应的 .vue 文件——你就找到这个页面的代码了。这招是读大项目的命根子。
顺藤摸瓜找接口。在这个页面里找到它调的接口函数（如 getUserList），按住 Ctrl 点它跳进 api/ 目录，看到它真正请求的 url 地址，记在小本本上（后端速通的《Java 后端》篇有用）。
读懂数据结构。看这个接口相关的 TS 类型 / interface，弄明白「一条用户数据里有哪些字段」。看不懂的类型选中问 AI。
小改一：给表格加一列。照着已有的 <el-table-column> 复制一行，改成显示另一个字段，保存看效果。
小改二：加一条校验。找到新增 / 编辑的表单，给某个输入框加一条「必填」校验规则，试试不填能不能被拦住。
找到 store。如果项目用了 Pinia，找到「当前登录用户」是存在哪个 store 里的，看它在导航栏是怎么被读出来显示的。
存档。你的每次小改都 git add . && git commit 一下，养成习惯。

提示

本阶段最重要的不是写代码，而是「敢在几万行的陌生项目里下手」。能搜到、能追到、能改对一小处，你就具备了在真实团队里干活的基本功。

什么才算合格

合格标准

跑起来：成功克隆并运行了一个开源后台项目
会定位：给你一个页面上的文字，你能用全局搜索几秒钟找到它的代码文件
能摸瓜：能从「页面 → 接口函数 → api 目录 → url 地址」一路追下去，并记下地址
看得懂 TS：面对 interface 和类型标注不发怵，能说出一条数据有哪些字段
能小改：独立完成「给表格加一列」和「加一条表单校验」并生效
懂共享数据：能指出项目里某份全局数据（如登录用户）存在哪、怎么被用

没达标怎么办

「看不懂全部代码」是完全正常的——真实项目没人能一次看懂全部。你只要能定位到、看懂一小块、改对一小处就算合格。追不动的地方，把代码贴给 AI 让它讲解。接下来翻到硬币的另一面——后端。