web前端有哪些技术栈
一、三大基础（必须掌握）
| 技术 | 作用 | 通俗理解 |
|---|---|---|
| HTML | 页面结构 | 盖房子的砖墙，定义“有什么” |
| CSS | 样式与布局 | 装修、刷漆、摆家具，定义“长什么样” |
| JavaScript | 交互与逻辑 | 电灯开关、自动门，定义“能干什么” |
这三样是前端的地基，无论用什么框架都离不开。
二、核心框架 / 库（三选一）
现在几乎没人用原生JS写大型应用，都是用框架。
| 框架 | 特点 | 适用场景 |
|---|---|---|
| React | 生态最庞大，函数式思想，由Facebook维护 | 大型企业级应用、需要极致性能 |
| Vue | 渐进式，易上手，中文文档友好 | 中小型项目、后台管理系统、个人开发 |
| Angular | 大而全，TypeScript原生，Google维护 | 非常大型的工程化项目（银行、保险等） |
新手建议：先学 Vue 或 React。Vue门槛更低，国内很多公司用。
三、构建工具 & 打包器
用来编译、打包、优化代码，让你写的最新语法（如ES6、TypeScript、Sass）能在所有浏览器运行。
| 工具 | 现状 |
|---|---|
| Vite | 🔥 新一代，极快，目前最流行 |
| Webpack | 老牌王者，功能强大但配置复杂 |
| esbuild | 极快，多用于底层 |
| Rollup | 主要用于打包库 |
现在新项目默认首选 Vite。
四、TypeScript（强烈推荐）
-
是什么：JavaScript 的超级，加了类型。
-
为什么用：写代码时能提前发现错误，智能提示更友好，大型项目必备。
-
地位：几乎所有现代前端框架（React、Vue、Angular）都官方支持，已成标配。
五、样式方案
| 方案 | 说明 |
|---|---|
| 纯CSS | 最基础，但管理大项目容易乱 |
| 预处理器（Sass/Less） | 让CSS支持变量、嵌套、函数，写起来更方便 |
| CSS-in-JS（styled-components） | 在JS里写CSS，适合React |
| 原子化CSS（Tailwind CSS） | 用预设好的类名（如 p-4、text-red）快速搭界面，目前很火 |
小项目用纯CSS或Sass；追求效率用 Tailwind。
六、状态管理
当应用复杂，组件之间共享数据很多时，需要统一管理“全局状态”。
| 框架 | 主要配合 | 特点 |
|---|---|---|
| Pinia | Vue | Vue官方推荐，简洁 |
| Vuex | Vue | 老牌，现在逐渐被Pinia替代 |
| Redux / Zustand | React | Redux生态庞大，Zustand更轻量 |
| NgRx | Angular | 受Redux启发 |
小项目不需要状态管理，用组件内部数据+事件即可。
七、路由管理
用于实现单页面应用（SPA）的页面跳转，但不刷新整个页面。
-
Vue：
Vue Router -
React：
React Router -
Angular：内置
Router
八、HTTP 请求
与后端API通信，获取/发送数据。
| 工具 | 说明 |
|---|---|
| fetch | 浏览器原生，现代浏览器都支持，够用 |
| axios | 第三方库，功能更丰富（拦截器、取消请求等），更常用 |
九、测试工具
| 类型 | 工具 |
|---|---|
| 单元测试 | Jest、Vitest |
| 组件测试 | Testing Library、Vue Test Utils |
| E2E测试 | Playwright、Cypress |
小项目可以不写测试；大项目推荐至少写单元测试。
十、包管理器
| 工具 | 特点 |
|---|---|
| npm | Node自带，最普遍 |
| yarn | 曾经更快，现在差距不大 |
| pnpm | 磁盘空间节省，速度快，正流行 |
十一、代码规范 & 格式化
-
ESLint：检查JS/TS代码错误和风格。
-
Prettier：自动格式化代码（统一缩进、分号等）。
-
Husky：在git提交前自动执行检查。
十二、常用UI组件库（开箱即用）
| 框架 | 推荐库 |
|---|---|
| Vue | Element Plus、Ant Design Vue、Vant（移动端） |
| React | Ant Design、Material UI、Chakra UI |
| Angular | Angular Material |
这些库提供了按钮、表格、弹窗等现成组件，不用自己造轮子。
🎯 一张图总结：现代前端技术栈（推荐组合）
语言：TypeScript（最好） / JavaScript
框架：Vue 3 或 React
构建：Vite
样式：Tailwind CSS 或 Scss
路由：Vue Router / React Router
状态：Pinia / Zustand
HTTP：axios
规范：ESLint + Prettier
包管理：pnpm 或 npm
以上就是一个前端工程师主要接触的技术栈。初学者建议先学 HTML+CSS+JS
浙公网安备 33010602011771号