跳到主要内容

前端知识架构体系

产品设计

  • 业务知识:领域建模
  • 原型设计:Figma、Sketch、蓝湖

前端基础

  • HTML:HTML5
  • CSS:CSS3+、SCSS、Less、Tailwind、PostCSS
  • JavaScript:
    • ES Next
    • TypeScript:推荐林不渡的两本掘金小册

JS 框架

  • Vue:Vue Router、Pinia、VueUse
  • React
  • Angular

UI 框架

  • Ant Design(React / Vue)
  • Element(Vue)

构建工具

  • 构建工具:Webpack、Vite、Bun、Babel

包管理

  • 包管理:npm、yarn、pnpm
  • 安装包、创建包、调试包、npx、模块化方案(CommonJS & ESM)

JS 运行时

  • Node
  • V8
  • Deno
  • Bun ?

单元测试

正则表达式

性能优化

数据可视化

  • Three.js
  • WebGL
  • Canvas
  • Blender

接口调试

  • 接口调试:Mock.js、Fake.js、Apifox
  • 接口范式:RESTful API、GraphQL
  • 数据库查询:SQL

前端工程化

  • 模块化
  • 组件化
  • 自动化:自动化部署、Puppeteer、CI/CD、GitHub Actions
  • 规范化

脚本、插件开发

  • 插件开发:Chrome 插件开发、VSCode 插件开发、Alfred 插件
  • 自动化脚本:npm Script

数据结构与算法

  • leetcode
  • 设计模式

开发工具

  • 文档工具:VuePress、VitePress、Docusaurus、GitBook、StoryBook
  • 方法库:Loadash、Dayjs
  • 图床工具:PicGo
  • 图片处理:
    • 图标:创建、管理、引用
    • 图片压缩
    • 视频压缩

开发实战

  • 各种文件上传、下载、预览
  • 画布
  • 微前端
  • 低代码
  • 组件库
  • 前端监控
  • 消息通信:WebSocket、mtqq

参考