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

20,006 阅读2分钟

「本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战!

一、前置知识

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

  1. Vue-UI库

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

  1. 前端工程化

前端模块化
模块化就是将一个大文件拆分成相互依赖的小文件,再进行统一的拼装和加载
前端组件化
模块化是在文件层面上,对代码或资源的拆分;
组件化是在设计层面上,对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