后端转前端：一份实用的技术路线图

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.vue
• pages/components/router/stores/api/

3. 单文件组件（.vue）

• template（视图）
• script setup（逻辑）
• style（样式）

4. Composition API 必会

• ref / reactive
• computed
• watch
• onMounted

5. 常见语法

• v-if / v-show
• v-for
• v-model
• :class / :style
• @click

6. 组件通信

• 父传子：props
• 子传父：emit
• 插槽 slot
• 状态上移：什么时候该放到 store

7. 路由与页面

• Vue Router：页面如何组织
• 动态路由参数

8. 状态管理

• 为什么需要 store
• 一个 store 管理：用户信息 / token / 全局配置

9. API 请求

• 请求封装
• 拦截器：加 token、统一错误处理

六、拓展：UI 是什么

这个表格能把'UI 到底是个什么东西'拆得清楚一点：

UI = 声明式描述 + 运行时对象树 + 渲染引擎 + 布局系统

最后

这篇文章不追求'系统性教学'，更多是把一次内部分享整理成可以独立阅读的版本。对后端同学来说，前端不是一个'从零开始的陌生世界'，而是一套可以循序渐进理解的工程体系。

如果你正准备补前端短板，希望这份路线图能帮你建立正确的认知框架。