前端导读_大纲

VIP_前端训练营_导读 0 361

前端学习路径前端存在知识点杂多、技术迭代快的特点，对于初学者往往面临着不知道学什么、不知道做什么的问题，虽然自己探索学习也是 ok 的，但大概率会多走一些弯路，训练营会结合大厂实际开发所需，规划一条从小白到前端开发工程师的完整学习路径。

网上的各类资料非常多，但也变成了缺点，对于新手来说就完全懵逼了，不知道该学什么，不用学什么，遇到问题甚至卡了好多天都不知道怎么解决，训练营就是解决这个问题。学习过程中除了提供相应的学习资料，也会全程帮助解决问题。

开始会带大家搭建自己的一个静态博客，可以购买自己的域名，也可以直接使用 github 提供的域名，未来总结的知识点可以分享到博客，输出会帮助自己更好的输入，总结过程往往也是一个学习的过程。

关于找工作时间这里说一下：

1、对于校招，是毕业前一年的春天找暑假实习，前一年的秋天正式找工作，毕业那一年的春天进行工作补录。
举个例子，如果是 2024 年毕业，那就是 2023 年春招找暑假实习，2023 年秋招找正式工作，秋招没找到工作就参加 2024 年的春招补录。

所以春招招的是下一年毕业学生的暑假实习，和当年毕业学生的补录。

2、对于已经毕业的同学，参加社招就不分秋招春招了，一年四季准备好了就可以投递简历。

前端知识大纲如下，大家可以过一下，对前端有一个整体的认识：

基本工具

git 简单使用，pull(fetch，merge)、push、reset
git 配合 GitHub，进行代码仓库管理
vscode，前端使用较多的开发者工具，了解基本的插件配置
vim 学习使用，知道怎么用 vim 编辑文件、保存文件、退出文件
nginx 相关配置，可以自己搭建博客
Charles 使用，抓包、Mock
markdown

前端基础

html/css 和 js 学习时间划分为 2:8，将重点放到 js 的学习上。

html，了解基本 div、span 标签
css，重点学习 position、flex，float 可以先略过
js，重中之重，操作dom、原型链、es6 等内容

前端入门

基本框架使用

简单学习 Vue 和 React 的语法，通过脚手架生成模版代码，通过框架重新实现之前的项目，接着进行分流，选择自己喜欢的框架，开始进入深入学习。由于 Vue 和 React 一直在发展，一个尴尬的事情就是从某个版本出现一个较大的变动，比如 vue2.x -> vue3，react16.8 推出 hooks 语法，告别 class 时代。由于旧项目的存在，平常开发中不管是 Vue 还是 React 两种肯定还是都会遇到。对于开发者，需要先深入其中的一个版本，然后再学习了解另一个版本的异同。

不管是 Vue 还是 React，基本需要掌握下边的几个点：

生命周期函数
条件语句、循环语句组件使用
自定义组件
第三方 element/antdesign 组件，echarts
各自特性Vue 或者 React 了解了其全貌一样

学有余力，也可以学习一下微信小程序开发，并且上线一个小程序。

TS 学习

了解类型系统，可以简单刷一些类型体操，明白 TS 的作用，和其他语言 Java 等的区别。

前端工程化了解

前期开发项目我们可能一个脚手架就搞定了所有配置，但知其然更要知其所以然，我们还需要手动来完成现代前端项目的所有配置。

webpack 了解输入输出，了解配置项
模块化开发
less/sass
babel，代码降级必备
eslint/prettier，统一格代码风格
husky/lint-staged，统一团队风格
CI/CD，持续化集成

浏览器

HTTP 请求dom
调试cookie，localstorage

Node.js

Node 让 js 成功脱离了浏览器，目前主要用于两大块方向，命令行工具和 web 服务器。

命令行工具：学习基本的 npm 包开发，编写自己的命令行工具，通过 gulp 打包，发布到 node.js 仓库中web
服务器：学习使用 koa，搭建前端接口，和自己的前端页面联通

前端进阶

前边都属于应用层面，我们知道怎么用、熟练的用、遇到问题知道怎么查就达到目的了。

到这一步，我们需要深入各个框架、工具的原理。

js: 模块化发展、异步请求发展…
Vue：响应式原理、nextTick 原理…
React：setState 原理、hooks 原理…
Vue/React：状态管理、路由管理…
Webpack：打包整体流程、插件原理…
Eslint/Babel：AST、解析规则、添加自定义规则…
npm/yarn/node：安装包流程，node和浏览器异同…
Koa: 洋葱模型、co 原理…
设计模式学习、应用

前端高阶

剩下这些都是学有余力的同学去学习了，一定是面试中的加分项

构建打包工具，webpack/esbild/swc/vite 异同
SSR 原理，Nuxt 框架使用
原子化 css，Tailwind CSS，Windi CSS
测试框架，Jest 等
Webassebmly 学习了解
PWA 了解
Lerna 进行
Monorepo 项目管理
跨端框架，RN、electron
低代码平台
微前端前端
3D，three.js，webgl
深度学习，TensorFlow.js