WEB 前端进阶路线图（持续更新）

前言

1. 本文章不定时更新
2. 本文定级为笔者经验总结，不代表行业标准，相关建议可以加我微信（c91374286）交流
3. 等级判断，主要依据 2 个方面进行判断
   1. 解决问题的能力（栗子：某某公司前端负责人，技术总监，一般能够处理大部分前端问题，管理问题，为公司创造效益）
   2. 所做的工作，能够影响到的行业内范围和人数多少（栗子：尤雨溪写业务，写 CSS 可能没有一般人厉害，但是人家就是国际顶尖前端工程师）
4. 更多有用的编程技巧，欢迎访问 陈随易的网站

• 入门（切页面）

  • 入门前期

    • 了解前端基本概念，知道基本标签、样式的含义和作用
    • 了解 html、css 是什么，知道什么是 html 标记，什么是 css 样式
    • 能够说出基本的常用 html 标记的区别和用途

  • 入门中期

    • 熟悉 html、css 基本使用，会使用其写出简单页面
    • 会根据不同的情况，使用不同的布局模式
    • 知道行内元素和块级元素的概念，熟悉各种定位的特点和应用场景
    • 能够写出垂直居中对齐以及水平居中对齐的多种方式

  • 入门后期

    • 熟练切页面，俗称切图仔，能写简单的前端特效，如 tab 切换、轮播图
    • 能考虑到页面的组件布局
    • 熟悉 vue.js 项目开发模式，能基于 vue 进行页面开发

• 初级（接功能）

  • 初级前期

    • 能根据接口文档，进行页面数据对接和功能逻辑处理
    • 能够基于某个框架生态脚手架（如：vue-cli），进行完整项目开发

  • 初级中期

    • 能够独立处理和解决问题，基本报错和性能优化可以搞定
    • 能够对 axios 进行二次封装，让其更便于项目的业务逻辑操作

  • 初级后期

    • 积累了大量实战经验，针对功能逻辑，能有自己的思考和方案

• 中级（写工具）

  • 中级前期

    • 具备自定义组件的能力，能够封装出较为通用的前端组件
    • 熟悉 webpack，能够针对项目进行专门的配置和定义
    • 在某个生态领域<比如 vue 生态>，拥有如鱼得水的熟悉度
    • 使用并可以独立配置 gulp/webpack/grant/vite 相关工具进行项目定制化开发
    • 具备基本的项目责任感，用心尽力完成项目进度，提高项目质量

  • 中级中期

    • 基本掌握某个后端语言进行简单的功能开发
    • 基于 gulp/webpack/grant/vite 等，能够封装通用开发模板

  • 中级后期

    • 熟练某个前端框架生态，能够在此生态基础上，总结出提效方案

• 高级（定规范）

  • 高级前期

    • 基本没有解决不了的前端问题
    • 能够熟练使用 java/php/nodejs/golang/python/ruby 等任一语言进行后端功能开发

  • 高级中期

    • 改变开发方式，基于经验实践，能够开发出受欢迎的，让项目开发大为加速的产品或工具
    • 能够不错地管理团队，并合理分配任务，管控进度

  • 高级后期

    • 制定行业规范，开源项目或技能水平，能够影响行业内部分前端程序员