# frontend-study-graph

**Repository Path**: sun_raise/frontend-study-graph

## Basic Information

- **Project Name**: frontend-study-graph
- **Description**: 前端企业级知识体系
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-18
- **Last Updated**: 2026-08-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 企业级前端知识体系

本仓库是基于《企业级前端知识体系》大纲整理而成的**分目录、分知识点**学习笔记，共 **62 篇**文章，按三大板块组织：

- **基础核心**（HTML / CSS / JavaScript）—— 前端的根
- **工程化进阶**（包管理器 / 构建工具 / TypeScript）
- **框架与架构**（Vue 3 生态）

每篇文章均包含「是什么 → 为什么 → 怎么用 → 注意事项」，并配有代码示例和面试高频考点。

> 原始大纲见：[企业级前端知识体系.md](./企业级前端知识体系.md)

---

## 目录

### 第一部分：基础核心

#### 1. HTML（构建骨架）

- [语义化标签](./01-基础核心/HTML/语义化标签.md) —— 布局/文本/媒体标签、响应式图片
- [表单](./01-基础核心/HTML/表单.md) —— 输入类型、属性、无障碍关联
- [全局属性](./01-基础核心/HTML/全局属性.md) —— `data-*`、`class`/`id`、`tabindex`
- [SEO 基础](./01-基础核心/HTML/SEO基础.md) —— meta 标签、Open Graph、JSON-LD

#### 2. CSS（层叠样式与布局）

- [选择器](./01-基础核心/CSS/选择器.md) —— 基础/组合器/伪类/伪元素、权重
- [盒模型](./01-基础核心/CSS/盒模型.md) —— `content-box` vs `border-box`、margin 塌陷
- [Flexbox 布局](./01-基础核心/CSS/Flexbox布局.md) —— 主轴/交叉轴、`flex-grow` 等
- [Grid 布局](./01-基础核心/CSS/Grid布局.md) —— `fr` 单位、`auto-fill` vs `auto-fit`
- [定位](./01-基础核心/CSS/定位.md) —— `relative`/`absolute`/`fixed`/`sticky`
- [响应式设计](./01-基础核心/CSS/响应式设计.md) —— 媒体查询、移动优先、响应式单位
- [动效](./01-基础核心/CSS/动效.md) —— `transition`/`animation`/`transform`、合成层

#### 3. JavaScript（核心编程语言）

- [数据类型](./01-基础核心/JavaScript/数据类型.md) —— 基本类型 vs 引用类型、栈 vs 堆
- [类型转换](./01-基础核心/JavaScript/类型转换.md) —— 隐式转换、`==` vs `===`
- [函数](./01-基础核心/JavaScript/函数.md) —— 声明/表达式/箭头函数、`this` 区别
- [闭包](./01-基础核心/JavaScript/闭包.md) —— 词法作用域、数据私有化、循环 var 坑
- [高阶函数与回调函数](./01-基础核心/JavaScript/高阶函数与回调函数.md) —— 数组方法、防抖节流
- [this 指向](./01-基础核心/JavaScript/this指向.md) —— 五条规则、call/apply/bind
- [事件循环](./01-基础核心/JavaScript/事件循环.md) —— 宏任务/微任务、执行顺序
- [Promise](./01-基础核心/JavaScript/Promise.md) —— 状态流转、`all`/`race`/`allSettled`/`any`
- [async / await](./01-基础核心/JavaScript/async-await.md) —— 语法糖、错误捕获、并发
- [Generator](./01-基础核心/JavaScript/Generator.md) —— `yield`、迭代器、async 原理
- [let 与 const](./01-基础核心/JavaScript/let与const.md) —— 块级作用域、暂时性死区
- [解构赋值](./01-基础核心/JavaScript/解构赋值.md) —— 对象/数组解构、函数参数
- [展开运算符](./01-基础核心/JavaScript/展开运算符.md) —— 浅拷贝、剩余参数
- [模块化](./01-基础核心/JavaScript/模块化.md) —— ESM、动态导入、CommonJS 对比
- [Map 与 Set](./01-基础核心/JavaScript/Map与Set.md) —— 新数据结构、WeakMap、Symbol
- [DOM 操作](./01-基础核心/JavaScript/DOM操作.md) —— 节点增删改查、文档碎片
- [事件流与事件委托](./01-基础核心/JavaScript/事件流与事件委托.md) —— 捕获/冒泡、委托
- [浏览器存储](./01-基础核心/JavaScript/浏览器存储.md) —— localStorage/sessionStorage/cookie

### 第二部分：工程化进阶

#### 1. 包管理器（Package Managers）

- [npm](./02-工程化进阶/包管理器/npm.md) —— `package.json`、Semver、lock 文件
- [yarn](./02-工程化进阶/包管理器/yarn.md) —— 并行安装、缓存机制
- [pnpm](./02-工程化进阶/包管理器/pnpm.md) —— 硬链接/符号链接、幽灵依赖

#### 2. 构建工具（Build Tools）

- [Vite](./02-工程化进阶/构建工具/Vite.md) —— 原生 ESM、Rollup 打包、代理
- [Webpack](./02-工程化进阶/构建工具/Webpack.md) —— 五大核心概念、Loader/Plugin、代码分割
- [Babel](./02-工程化进阶/构建工具/Babel.md) —— 预设/插件/polyfill、语法 vs API

#### 3. TypeScript（类型的约束与安全）

- [基础类型](./02-工程化进阶/TypeScript/基础类型.md) —— `any`/`unknown`/`never` 等
- [interface 与 type](./02-工程化进阶/TypeScript/interface与type.md) —— 区别与选择
- [联合类型与交叉类型](./02-工程化进阶/TypeScript/联合类型与交叉类型.md) —— `|` 与 `&`
- [泛型](./02-工程化进阶/TypeScript/泛型.md) —— 类型参数、约束 `extends`
- [工具类型](./02-工程化进阶/TypeScript/工具类型.md) —— `Partial`/`Pick`/`Omit`/`Record`
- [类型守卫](./02-工程化进阶/TypeScript/类型守卫.md) —— `typeof`/`in`/`is`、可辨识联合
- [条件类型与映射类型](./02-工程化进阶/TypeScript/条件类型与映射类型.md) —— `infer`、类型体操

### 第三部分：框架与架构（Vue 3 生态）

#### 1. Vue 3 核心

- [Composition API](./03-框架与架构/Vue3核心/CompositionAPI.md) —— 组合式 API 概览
- [setup 语法糖](./03-框架与架构/Vue3核心/setup语法糖.md) —— `<script setup>`
- [响应式核心](./03-框架与架构/Vue3核心/响应式核心.md) —— `ref`/`reactive`/`toRefs`
- [computed 计算属性](./03-框架与架构/Vue3核心/computed计算属性.md) —— 缓存、getter/setter
- [watch 与 watchEffect](./03-框架与架构/Vue3核心/watch与watchEffect.md) —— 侦听器、flush 时机
- [生命周期](./03-框架与架构/Vue3核心/生命周期.md) —— 钩子、与 Vue 2 对比
- [组件通信](./03-框架与架构/Vue3核心/组件通信.md) —— Props/Emits、v-model
- [provide 与 inject](./03-框架与架构/Vue3核心/provide与inject.md) —— 跨层级传值
- [模板引用 ref](./03-框架与架构/Vue3核心/模板引用ref.md) —— 获取 DOM/组件实例
- [Teleport](./03-框架与架构/Vue3核心/Teleport.md) —— 传送门
- [Suspense](./03-框架与架构/Vue3核心/Suspense.md) —— 异步组件加载状态
- [KeepAlive](./03-框架与架构/Vue3核心/KeepAlive.md) —— 缓存组件状态
- [Composables 组合式函数](./03-框架与架构/Vue3核心/Composables组合式函数.md) —— 逻辑复用精髓

#### 2. Vue 3 生态工具

- [Vue Router 路由](./03-框架与架构/Vue3生态工具/VueRouter路由.md) —— 动态/嵌套路由、守卫、懒加载
- [Pinia 状态管理](./03-框架与架构/Vue3生态工具/Pinia状态管理.md) —— Store、持久化插件
- [Element Plus 组件库](./03-框架与架构/Vue3生态工具/ElementPlus组件库.md) —— 常用组件 API
- [Tailwind CSS](./03-框架与架构/Vue3生态工具/TailwindCSS.md) —— 原子化 CSS、响应式前缀

#### 3. 深入理解 Vue 原理（面试进阶）

- [虚拟 DOM 与 Diff 算法](./03-框架与架构/Vue原理进阶/虚拟DOM与Diff算法.md) —— 双端比较、key 的作用
- [响应式原理](./03-框架与架构/Vue原理进阶/响应式原理.md) —— Proxy vs Object.defineProperty
- [编译器原理](./03-框架与架构/Vue原理进阶/编译器原理.md) —— 模板 → AST → 渲染函数、PatchFlag

---

## 学习建议

1. **基础核心**是第一优先级，务必「烂熟于心」，尤其闭包、this、事件循环、Promise。
2. **工程化进阶**是日常开发必备，重点掌握 npm/pnpm、Vite、TypeScript 泛型与工具类型。
3. **框架与架构**以 Vue 3 为主线，先掌握组合式 API，再深入响应式和 Diff 原理。

## 目录树速览

```
frontend-study-graph/
├── 企业级前端知识体系.md
├── 01-基础核心/
│   ├── HTML/      （4 篇）
│   ├── CSS/       （7 篇）
│   └── JavaScript/（18 篇）
├── 02-工程化进阶/
│   ├── 包管理器/  （3 篇）
│   ├── 构建工具/  （3 篇）
│   └── TypeScript/（7 篇）
└── 03-框架与架构/
    ├── Vue3核心/     （13 篇）
    ├── Vue3生态工具/ （4 篇）
    └── Vue原理进阶/  （3 篇）
```