README · Front-End
前端
我的前端自学笔记总索引。写给零基础的自己: 按下面的顺序读, 每一篇只假设我读过它前面的篇目, 遇到没讲过的概念都会当场解释或给链接。
学习路线
代码块收起展开
HTML · CSS · JavaScript
↓
完整示例 (纯三件套 Todo)
↓
调试 · 核心自测
↓
工具链 (npm / 模块化 / Vite)
↓
项目文件架构
↓
Vue 主线 · 工具库 · 性能优化基础
| 笔记 | 内容 |
|---|---|
| HTML 基础 · 标签语法 | 网页就是文本文件、标签、属性、动手写第一个网页 |
| CSS 基础 · 样式与布局 | 选择器、盒模型、Flex 布局配方、响应式入门 |
| JavaScript 基础 · 语法与 DOM | ES6 语法、数组方法、DOM、事件、异步演进、fetch |
| 完整示例 | 纯三件套 Todo, 数据驱动思想的萌芽 |
| 核心自测 | 按主题分组的自测题, 检验前几篇 |
工程专题
| 笔记 | 内容 |
|---|---|
| 调试与排查 | F12 各面板按排查场景讲, 常见故障 |
| 开发工具链 | 为什么需要工具、npm 对照 Maven、import/export 首讲、Vite |
| 项目文件架构 | 启动链路、配置文件、src 演化、排错入口 |
| 性能优化 | 指标人话版、加载/渲染/打包优化、监控 |
| 常用工具库 | Lodash、Day.js、VueUse、ECharts 各解决什么痛 |
Vue 主线
入口: Vue 目录
| 顺序 | 笔记 | 内容 |
|---|---|---|
| 0 | Node / NVM / npm 前置 | 装环境视角, Java 工具链对照 |
| 1 | Vue3 快速上手 | 全景速览, 每个主题到能跑通为止 |
| 2 | 两种写法对比 | Options API 到 setup() 到 script setup 演进史 |
| 3 | 01 核心与响应式 | ref 为什么要 .value、computed/watch、Proxy 原理 |
| 4 | 02 组件设计与数据流 | 组件边界、props/emits、插槽、useXxx |
| 5 | 03 Router 与权限路由 | 路由从零讲起、守卫对照拦截器、动态权限 |
| 6 | 04 Pinia 与 Vuex | 什么才该进 Store、Setup Store、Vuex 存量 |
| 7 | 05 工程化与请求层 | 完整 CRUD 链路、axios 封装、Element Plus |
| 8 | 06 问题清单与项目表达 | 自检问题清单、把项目讲清楚的模板 |
技能树
代码块收起展开
前端
├── 基础: HTML / CSS / JavaScript
├── 工程: npm · Vite · Git · ESLint
├── 框架: Vue3 · Router · Pinia
├── 生态: 请求层 · UI 控件 · 工具库
└── 进阶: TS · 测试 · 性能 · 部署