> 「本文已参与好文召集令活动，点击查看：[后端、大前端双赛道投稿，2万元奖池等你挑战！](https://juejin.cn/post/6978685539985653767)」 ### 一、前置知识 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 ### 七、学习路线图 ![webMap](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e1ebfd75f7bf4f72b16f171611c1273b~tplv-k3u1fbpfcp-zoom-1.image)