前端学习路线

这段日子收到不少私信想要前端的学习规划路线，最近我也呕心沥血，给大家总结了一套前端的学习规划路线，从小白到初级前端工程师，再接着进阶高级等等该掌握的技能，希望对大家有帮助

HTML

HTML 是用来编写网页代码结构的，它有一系列的标签用于显示不同的页面元素，比如用 <a/> 显示一个超链接，<img/> 显示一张图片，就跟写一个 word 文档一样，只是单纯用 html 只能写内容，不能进行排版和美化样式，如果让网页变得漂亮，需要 CSS。

✔︎  学习 HTML 基础，标签、元素、表单验证等等

✔︎ 语义化标签

✔︎ 了解 Web 无障碍（Accessibility）

✔︎ 学习 SEO 优化

学习HTML ：推荐wschool官网 https://www.w3school.com.cn/

CSS

CSS 是用来美化 HTML 编写的页面的，通过一些语法选择特定的 html 标签，然后用一些属性来给它们添加样式，比如文字颜色，背景，位置，边距，定位等等，还可以添加动画效果让页面显示的栩栩如生~。重点要掌握 CSS 的盒子模型、常用的布局方式，比如 flex、grid 等。

✔︎  学习 CSS 基础

✔︎  制作布局：浮动、定位、显示、盒模型、网格布局、弹性布局

✔︎  响应式设计和媒体查询（@media）

✔︎ 结合 HTML 制作一个简单的网页作为最佳实践

学习CSS ：推荐wschool官网 https://www.w3school.com.cn/

JavaScript

在写完html、css 之后，咱们就可以写漂亮的页面了，那么接下来就是需要学习 JavaScript，让网页能和人进行互动，比如点击按钮弹出个对话框，处理用户输入的表单信息，添加一些复杂的动画，使用 ajax 加载远程数据等等。它可以直接操作 HTML 元素

✔︎  学习语法和基本结构

✔︎  学习操作 DOM

✔︎  学习 Fetch API / Ajax（XHR）

✔︎  ES6+ 和模块化 JavaScript

✔︎  了解变量提升、事件冒泡机制、作用域、原型、Shadow DOM、严格模式等概念

书籍：《JavaScript 高级程序设计（第4 版）》也就是红宝书

《你不知道的JS（上中下）》

《Es6标准入门（阮一峰）》

计算机网络

建议看看《图解Http》《图解Tcp/ip》

前端进阶

前端三大框架（Vue、React、Angular）

Vue3.0基础语法

• Vuex：状态管理
• Vue-router：路由
• axios：请求
• Vue-Devtools：调试工具
• vite：构建工具
• 可选：vue-cli + webpack

Vue-UI库

• element-UI（饿了么团队）
• Ant-Design（蚂蚁金服团队）
• vant（有赞团队）

前端工程化

前端模块化

模块化就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载

前端组件化

模块化是在文件层面上，对代码或资源的拆分；

组件化是在设计层面上，对UI（用户界面）的拆分

前端规范化

职责分离，规范项目各个事项

前端自动化

把一切简单机械的重复劳动都让自动化工具去完成

高级前端

HTTP协议

网络安全

设计模式

数据结构

算法

性能优化

移动端开发

微信小程序

微信公众号

微前端

后端知识

linux

数据库（mysql、mongoDB）

node.js

node.js框架（koa、express、Nest.js）

工具

vscode

babel

自动化工具（Grunt、Gulp）

包管理工具（npm、yarn）

构建工具（vite、vue-cli+webpack）

git工具

富文本编辑器：Braft Editor

数据可视化：ECharts

模拟数据：Mock.js

 ***********************