前端开发· 从三件套到工程化

掌握 HTML、CSS、JavaScript 三大件，进阶 Vue、React 主流框架，再以 TypeScript、Vite、Webpack 构建现代化前端工程。

3
门前端基础
2
大主流框架
3
项工程化能力

前端技术总览

从基础三件套到主流框架，再到工程化工具链，一条龙构建前端知识体系

🧱
前端基础三件套 Core Basics

一切前端应用的起点：结构（HTML）、表现（CSS）、行为（JavaScript），三驾马车缺一不可。

入门必备 地基
📄 HTML
基础 难度：低
语义化标签、文档结构、表单与媒体元素、SEO 与可访问性，搭建网页内容骨架的第一课。
进入学习 →
🎨 CSS
基础 难度：中
选择器、盒模型、Flex/Grid 布局、动画过渡与响应式设计，让页面拥有惊艳的视觉表现。
进入学习 →
⚡ JavaScript
基础 难度：中高
语法与数据类型、DOM/BOM 操作、事件机制、异步编程（Promise/async）、ES6+ 新特性，前端核心语言。
进入学习 →
🚀
主流框架 Frameworks

组件化、声明式、响应式开发，Vue 与 React 是当下国内前端岗位的核心技能。

岗位必备 组件化
🌿 Vue
框架 难度：中
渐进式框架，模板语法、响应式系统、组件通信、Vue Router 与 Pinia，上手快、生态完善。
进入学习 →
⚛️ React
框架 难度：中高
组件化与函数式编程、Hooks、虚拟 DOM、状态管理（Redux/Zustand），大厂前端主流技术栈。
进入学习 →
🛠️
前端工程化 Engineering

类型安全、极速构建、打包优化，让大型前端项目可维护、可测试、可协作。

进阶 工程能力
🔷 TypeScript
工程化 难度：中
静态类型系统、接口与泛型、类型推断与高级类型，为 JavaScript 加上编译期安全网。
进入学习 →
🚄 Vite
工程化 难度：中
基于 ESM 的下一代构建工具，开发服务器秒级启动、HMR 极速热更新，现代前端项目的首选脚手架。
进入学习 →
📦 Webpack
工程化 难度：中高
模块打包、Loader 与 Plugin、代码分割与 Tree Shaking、性能优化，理解构建原理的经典工具。
进入学习 →