随着技术发展，全栈能力成为趋势。以下整理前端快速入门要点。
一、前端演进历程
1. 远古时期：demo 网页（纯 HTML）
- 学生时代的网页三剑客：Dreamweaver、Photoshop、Flash
- 一个
index.html打天下 - 页面 = 结构（HTML）+ 样式（CSS）+ 交互（JS）
2. 服务端渲染时代：JSP / PHP / ASP（后端主导）
- 后端拼页面：JSP 输出 HTML
- 优点：简单直观、SEO 友好
- 痛点：复杂交互越来越难做、页面复用差、开发耦合重
3. 前后端分离：API + SPA 崛起
- 后端只负责：数据 & 鉴权
- 前端负责：页面渲染 & 交互
- 典型模式：RESTful API / JSON / Token
4. 工程化时代：Vue / React（组件化 + 状态管理）
- 页面不再是'拼 HTML'，而是'拼组件'
- 代码从'脚本'变成'应用工程'
- 构建体系：Webpack → Vite
5. 再往后：跨端 & 前端 Native
- Electron / Tauri（桌面端）
- React Native / Flutter（移动端）
- 小程序生态
- 本质：用前端思维写应用，用不同运行时交付
二、现代前端工作内容
很多后端同学对前端的印象还停留在'写页面'，但实际交付物已经远超这个范畴。
1. 一个前端项目的交付物
- UI 页面（组件）
- 路由（页面组织）
- 状态管理（数据）
- 接口层（请求、错误处理）
- 打包构建（发布）
2. 前端岗位常见分工
- 页面 / 组件开发
- 工程化（构建、脚手架、规范）
- 性能与稳定性（错误监控、埋点）
- 跨端（桌面 / 移动 / 小程序）
3. 和后端 / 客户端协作的关键点
- 接口契约（字段、分页、错误码）
- 鉴权（Cookie / Token）
- 跨域、文件上传下载、流式数据
- 联调方式：mock / swagger / postman
三、基础三件套快速入门
这部分强调的是'够用优先'。先能理解，再慢慢深入。
1. HTML：结构与语义
- 常见标签：div / span / img / a / input / button / form
- 语义化：header / main / footer
- DOM 是什么（树结构）
2. CSS：样式与布局
- 选择器（类、id、层级）
- 盒模型（margin / padding / border）
- Flex 布局
- 常见'对齐 / 居中'套路
- 响应式：媒体查询 / 宽度自适应
3. JavaScript：交互与逻辑
- 变量 / 函数 / 对象 / 数组（够用即可）
- 事件：click、input
- 异步：Promise / async await
- DOM 操作（了解即可）
四、TypeScript：从'能跑'到'可维护'
前端的真实痛点不是'能不能写'，而是'能不能协作、能不能长期维护'。TS 就是这里的分水岭。
1. 为什么需要 TS
- JS 灵活但容易踩坑，协作成本高
- TS 提供：类型约束 + IDE 提示 + 重构安全感
2. 关键概念
- 基础类型：string / number / boolean / any / unknown
- interface / type
- 泛型（点到为止）
- 典型场景：接口返回值定义、组件 props 定义
五、Vue3 快速上手路线
这部分是实操里最容易'卡住'的地方，心智模型是：数据驱动 UI。
1. Vue3 心智：数据驱动 UI
- UI = f(state)
- state 变 → 页面自动更新
2. 项目结构
main.ts/App.vuepages/components/router/stores/api/
3. 单文件组件（.vue）
- template（视图）
- script setup（逻辑）
- style（样式）
4. Composition API 必会
ref / reactivecomputedwatchonMounted
5. 常见语法
v-if / v-showv-forv-model:class / :style@click
6. 组件通信
- 父传子：props
- 子传父：emit
- 插槽 slot
- 状态上移：什么时候该放到 store
7. 路由与页面
- Vue Router：页面如何组织
- 动态路由参数
8. 状态管理
- 为什么需要 store
- 一个 store 管理：用户信息 / token / 全局配置
9. API 请求
- 请求封装
- 拦截器：加 token、统一错误处理
六、UI 概念解析
UI = 声明式描述 + 运行时对象树 + 渲染引擎 + 布局系统
| 平台 | 描述层 | 运行时对象 | 渲染 |
|---|---|---|---|
| Web | HTML / JSX | DOM | Blink/WebKit |
| Android | XML | View / ViewGroup | Skia |
| iOS | XIB | UIView | CoreAnimation |
| Vue/React | Template / JSX | Virtual DOM → DOM | 浏览器 |
| Qt Widgets | C++ + .ui(XML) | QWidget | Raster / OpenGL |
| Qt QML | QML | QObject / QQuickItem | Scene Graph |
| Flutter | Dart Widget | RenderObject | Skia |
前端是一套循序渐进理解的工程体系。希望这份路线图能帮你少走几条弯路。
