前端学习路线(很长,建议收藏)

一、前置知识

1、网站是如何工作的（了解各个工种如何协同工作）

产品经理=> ui设计=> 前端=> 后端（服务器+数据库）=> 测试=> 运营

2、前后端分离思想

3、IDE（vscode）编译器

二、前端基础

**HTML（结构）

**CSS（样式）

**JAVASCRIPT（交互）

三、前端基础补充知识

• CSS预编译（sass、less、Stylus）
• CSS后处理器（PostCss）
• JS超集（TypeScript）
• 响应式布局
• 兼容性调整
• 解决CSS不适用大型项目的三种方案
  
  ①CSS modules
  
  ②CSS in JS
  
  ③Tailwind CSS
  

四、前端进阶

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

   Vue3.0基础语法
   
   Vuex：状态管理
   
   Vue-router：路由
   
   axios：请求
   
   Vue-Devtools：调试工具
   
   vite：构建工具
   
   可选：vue-cli + webpack

2. Vue-UI库

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

3. 前端工程化

   前端模块化
   
   模块化就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载
   
   前端组件化
   
   模块化是在文件层面上，对代码或资源的拆分；
   
   组件化是在设计层面上，对UI（用户界面）的拆分
   
   前端规范化
   
   职责分离，规范项目各个事项
   
   前端自动化
   
   把一切简单机械的重复劳动都让自动化工具去完成

四、高级前端

1. HTTP协议
2. 网络安全
3. 设计模式
4. 数据结构
5. 算法
6. 性能优化
7. 移动端开发
8. 微信小程序
9. 微信公众号
10. 微前端

五、后端知识

• 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

七、学习路线图