后端视角学前端（一）：生态全景

写了几年后端，开始碰前端。这个系列记录一个后端开发者学前端的路径和思考。

1. 前端三件套

浏览器只认三样东西：

所有 .vue、.tsx、.ts、Tailwind 代码最终都要”编译”成这三样，浏览器才能运行。这就是前端需要构建工具的根本原因——后端写了直接跑，前端得先翻译。

TypeScript 是 JavaScript 的超集，加了类型系统。等价于 Python 的 Type Hint + mypy：

// TypeScript
const name: string = "hello"
function add(a: number, b: number): number { return a + b }

# Python
name: str = "hello"
def add(a: int, b: int) -> int: return a + b

2. 三大框架

原生 JS 操作 DOM 极其痛苦，框架帮你做了”数据变了 → UI 自动更新”这件事。

Vue 用模板语法，接近 HTML，上手快：

<template>
  <button @click="count++">{{ count }}</button>
</template>
<script setup>
const count = ref(0)
</script>

React 用 JSX，JS 和 HTML 混写，更灵活：

function App() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Vue 像 Python（约定优于配置），React 像 Java（一切显式声明）。选哪个都行，核心概念相通。

3. 构建工具

前端的”编译器”，负责把源码变成浏览器能跑的文件。

Vite 启动快的原因：不打包。Webpack 启动时把所有文件打包成一个 bundle，Vite 利用浏览器原生的 ES Module 按需加载——访问哪个页面才编译哪个文件。

npm run dev    # 启动开发服务器（Vite）
npm run build  # 打包生产版本

4. CSS 方案

前端样式领域碎片化严重，主流三种路线：

传统 CSS — 写 class 名 + CSS 文件：

.button { background: blue; color: white; padding: 8px 16px; }

Tailwind CSS — 原子化，样式直接写在 HTML 里，不需要 CSS 文件：

<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">
  点击
</button>

每个 class 名对应一条 CSS 规则。不用起 class 名，AI 生成质量极高。

CSS-in-JS（styled-components） — JS 里写 CSS，React 生态多用：

const Button = styled.button`background: blue; color: white;`

2026 年的趋势：Tailwind 占主导，尤其 AI 辅助开发场景。

5. UI 组件库

提供现成的按钮、表格、弹窗、日期选择器等组件，开箱即用。

用组件库 vs 用 Tailwind 自己写：

AI 时代的趋势：越来越多项目选择 Tailwind 自写，因为 AI 生成 Tailwind 代码的质量远好于操作组件库 API。

6. 包管理器

package.json ≈ requirements.txt，package-lock.json ≈ uv.lock。

7. 前端 vs 后端的本质差异

核心差异：前端是”在别人的电脑上跑代码”，后端是”在自己的服务器上跑代码”。