👣 为了自己的学习更加调理清晰，并且清楚自己一步一步走过的脚印，决定梳理一下先前从学习前端开始到最近在学习的核心框架，经历的知识栈路线。本路线从看过不少培训网站、个人博客抽取精华的部分，并且附上了本「笔记」中的相关笔记的链接，不一定完美精准，阅读与参考需谨慎，酌情况根据最新的前端学习知识栈更新。

提示

相关 emoji 标识：

🍎 重中之重，必学。

🍏 相对重要，建议学习。

🫐 选择性学习。

🥕 面试重点。

🍞 相关资源。

前端学习相关的开发工具 / 环境

• 🍎 WebStorm 用来写项目方便舒服，简单来说就是我的神。配置无脑快速简单，集合多种框架方案，插件丰富，UI 颜值在线，字体舒服。夸不下去了我快。缺点就是要订阅，不过可以趁着学生邮箱申请 JetBrains 的学生计划（或者选择加入 GitHub 的 Education 计划，也有包含 JetBrains 全家桶）。
• 🍎 Visual Studio Code 作为 WebStorm 忙不过来的另一个代码编辑器吧。在编写一些轻量的代码时也很好用，插件的选择也非常丰富，不过我还是选择少点去折腾，毕竟懒。
• 🍏 浏览器可以选择基于 Chromium 的 Chrome 或者 Edge。个人很爱 Edge，毕竟是苹果最佳开发者微软开发的软件。
• 🍎 Typora 一个写 Markdown 文档、笔记都非常好用的软件。主要还是可见即所得的特性就让人离不开了。

🚶 入门部分

了解前端学习的方向，所需的开发环境与工具。「前端三件套」是基础中的重中之重。对应本笔记中的 「🚶 前端基础部分」。

🍎 计算机网络

🍎 HTML 基础 / HTML 5

• 🍎 HTML 基本语法
• 🍏 HTML 的语义化写法
• 🍎 HTML 表单 / 表单验证

🍎 CSS 基础 / CSS 3

🍎 JavaScript 基础

🍎 CSS 3

🍏 JSON

🫐 jQuery

🍎 Git 版本管理与控制

🚶 巩固基础

🍎 ES6 语法

🍎 JavaScript 深入进阶

🍎 软件开发相关

🍏 设计模式

🍏 Linux 服务器

🍏 正则表达式

🍎 计算机基础知识

• 🍎/🍏 计算机网路
• 🍎 算法与数据结构
• 🍏 操作系统
• 🍎 数据库基础

🍎 重要辅助

• 🍎 Node.JS
• 🍏 包管理 npm /yarn/npx
• 🫐 开发框架 Express / Koa /egg

🏃 高级核心

🍎 前端工程化

🍞 🧰 前端开发工程化

🍎 前端架构设计

• 模块化 / 组件化
• 🍏 MVVM
• 设计原则
• 🍎 SPA 单页应用
• 🍎 多页应用
• 🍏 前端路由 Router
• PWA
• 有损服务

🍎 前端核心框架

• 🍎 Vue.js / Vue 3
  • Vuex
  • Vue-router
• 🍎 React
• 🍏 UmiJS

🍎 前端框架脚手架

• 🍎 Vue-CLI for Vue

• 🫐 Vite for Vue

• 🍎 create-react-app for React

• 🍏 前端组件库：

  • 🍎 Element UI for Vue
  • 🍏 VantUI for Vue
  • 🍎 Ant Design for React

• 🍏 前端数据可视化

  • 🫐 ECharts
  • 🍏 AntV

🍎 CSS 进阶相关

• 🍏 Bootstrap

• 🍎 Tailwind CSS

• CSS 模块化

  • 🍎 CSS modules
  • 🍏 styled-components
  • 🍏 Styled JSX

• CSS 预编译

  • 🍏 Stylus
  • 🫐 Less
  • 🍎 SASS
  • 🍏 PortCSS

🍎 JavaScript 相关拓展库

• 🔧 工具库

  • 🍎 Promise
  • 🍎 axios
  • 🍎 Lodash 防抖与节流

• 组件 / 插件

  • 富文本编辑器
  • 弹窗
  • 轮播图

• 动效库

  • 🍏 Animate.css
  • Ant motion

• 字体库

  • 🍎 IconFont
  • Font Awesome

🍏 测试相关

• 测试分类

  • 🍎 Jest
  • 🍎 UT 单元测试

• 测试工具：

  • 🍎 Mock：模拟数据工具 Mock.js

🍏 代码质量

• 开发规范：

  • HTML Guide

  • JavaScript Style Guide

  • CSS Style Guide

  🍞 相关链接：

  • 编码规范 by @mdo (bootcss.com) (opens new window)

• 类型校验：

  • 🍏 TypeScript

• 代码检查：

  • 🫐 ESLint
  • StyleLint

🫐 构建工具

• 🍎 npm

• Gulp

• Grunt

🫐 打包工具

• 🍎 webpack
• 🍏 Vite
• 🍏 Rollup

🫐 部署相关

• 🍎 Web 服务器
  • 🍎 Nginx
  • 🍏 Apache
• 容器
  • 🍏 Docker

🍏 前端优化相关

• 性能优化
• 搜索引擎优化 SEO

🍏 前端兼容性

• 浏览器兼容性
• 屏幕分辨率兼容性
• 跨平台兼容性

🤛 面试求职相关

🍎 准备简历

🍎 熟悉流程

🍎 充分准备

🚀 冲冲冲！

🥕 拓展阅读与相关资源

🔗 部分参考来源：

• Frontend Developer Roadmap: Learn to become a modern frontend developer (opens new window)

• 鱼皮前端学习路线 (opens new window)

🍎 优秀作者推荐收藏夹：

• 编程导航 - 发现优质编程资源 (code-nav.cn) (opens new window)

• CodingStartup 起码课 (opens new window)

• 前端小课 (lefex.github.io) (opens new window)

🍏 相关阅读收藏夹：

• 网道 ES6 ECMAScript 6 简介 - ES6 教程 - 网道 (wangdoc.com) (opens new window)

• 你不懂 ES6 系列丛书 JoeHetfield/You-Dont-Know-JS: A book series on JavaScript. @YDKJS on twitter. (github.com) (opens new window)

• Wscats 前端学习笔记 Wscats/articles: 🔖My Learning Notes and Memories - 分享我的学习片段和与你的回忆 (github.com) (opens new window)