Web前端开发学习路线

• 前言
• 准备阶段
• 第一阶段（1-2周）
  • HTML 基础（HTML5 标准）
  • CSS 基础（CSS3 新特性）
• 第二阶段（1-2周）
  • JavaScript 基础
  • ES6 语法
  • TypeScript（可选）
• 第三阶段（2周）
  • Vue
  • React
  • UI 框架
• 第四阶段（2周）
  • uni-app（推荐）
  • Taro（可选）
  • Flutter（可选）
• 第五阶段（2周）
  • Node.js
  • Ajax（可选）
  • Axios
• 第六阶段（可选）
• 第七阶段（可选）
• 前端学习网站
  • B站
  • 慕课网
  • 菜鸟教程
  • 掘金社区
  • 思否社区
  • github
  • iconfont
• 总结
• 参考资料

前言

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

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

2. 前后端分离思想

3. IDE（vscode）编辑器

准备阶段

前端开发利器

0基础学前端，首先要做的就是选好一款开发工具，然后再开启代码学习之路。

Visual Studio Code 是每个学前端的人都要用到的编辑器。另外，前端常见的编辑器、IDE有两个：Sublime Text 和 WebStorm 。WebStorm 什么都好，可就是太卡顿；VS Code就相对轻量很多，但是比较占内存。个人总结一下：用 VS Code 的人越来越多，用 WebStorm 的人越来越少。具体可以看：《第一次使用VS Code时你应该知道的一切配置》

工具推荐

• VS Code 官网下载地址：https://code.visualstudio.com/
• Sublime Text 官网下载地址：https://www.sublimetext.com/
• WebStorm 官网下载地址：https://www.jetbrains.com/webstorm/

第一阶段（1-2周）

网页布局和效果实现

学完以下基础知识后，可以仿照电商、视频、音乐网站（例如京东、小米、B站、QQ音乐）做静态首页的布局。

HTML 基础（HTML5 标准）

HTML 代表超文本标记语言。 它用于前端，为网页提供结构，您可以使用 CSS 设置样式并使用 JavaScript 进行交互。

HTML 基础在线教程：https://www.runoob.com/html/html-tutorial.html

HTML5 在线教程：https://www.runoob.com/html/html5-intro.html

CSS 基础（CSS3 新特性）

CSS 层叠样式表是用于设置任何网站前端样式的语言。 CSS 是万维网的基础技术，与 HTML 和 JavaScript 并列。

CSS 基础在线教程：https://www.runoob.com/css/css-tutorial.html

CSS3 在线教程：https://www.runoob.com/css3/css3-tutorial.html

第二阶段（1-2周）

JavaScript 网页特效与交互

让我们来看看 JavaScript 有什么特别之处，我们可以用它实现什么，以及哪些其他技术可以与其搭配产生奇妙的效果。

JavaScript 基础

JavaScript 允许您向页面添加交互性。 您可能在网站上看到的常见示例是滑块、点击交互、弹出窗口等。

JavaScript 在线教程：https://www.runoob.com/js/js-tutorial.html

ES6 语法

ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的增强版。

ES6 在线教程：https://www.runoob.com/w3cnote/es6-tutorial.html

ES6 入门教程：https://es6.ruanyifeng.com/

TypeScript（可选）

TypeScript 是一种基于 JavaScript 的强类型编程语言，可为您提供任何规模的更好的工具。

访问地址：https://www.typescriptlang.org/

TS 在线教程：https://www.runoob.com/typescript/ts-tutorial.html

TypeScript（简称TS）。ES 是 JS 的标准，TS 是 JS 的超集。TS属于进阶内容，建议把上面的基础掌握之后，再学TS。

第三阶段（2周）

前端主流框架推荐学习 Vue.js 和 React.js。这两个框架至少要会一个。入门时，建议先学Vue.js，上手相对容易。但无论如何，同时掌握 Vue 和 React 才是合格的前端工程师。

Vue

用于构建用户界面的渐进式框架

Vue.js 官网：https://cn.vuejs.org/

Vue.js 技术的学习以"视频+官方文档"为主，至少要看一套Vue系统视频教程，再熟读官方文档，当然看一遍肯定是不够的，至少得两遍。基础学完后，就得找1-2个Vue项目来实战一下。

React

用于构建用户界面的 JavaScript 库

React.js 官网：https://zh-hans.reactjs.org/

UI 框架

常用的 UI 框架 Ant Design、Element UI。开发管理后台系统的时候，这两个UI框架使用比较多。Element UI 是基于 Vue.js技术栈的。Ant Design 既有基于 React技术栈的，也有基于 Vue.js技术栈的 Ant Design Vue。

第四阶段（2周）

uni-app（推荐）

访问地址：https://uniapp.dcloud.io/

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、快应用等多个平台。uni-app 在手，做啥都不愁。即使不跨端，uni-app 也是更好的小程序开发框架（详见）、更好的 App 跨平台框架、更方便的 H5 开发框架。

Taro（可选）

访问地址：https://taro-docs.jd.com/taro/docs

Taro 一套 遵循React 语法规范的多端开发解决方案。使用 Taro，只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、App 端等）运行的代码。同时 Taro 还提供了开箱即用的语法检测和自动补全等功能。

Flutter（可选）

访问地址：https://flutterchina.club/

Flutter 为应用开发带来了革新： 只要一套代码库（Dart），即可构建、测试和发布适用于移动、Web、桌面和嵌入式平台的精美应用。

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

第五阶段（2周）

Node.js

如果时间不够，可以先不学，但至少要知道 Node.js 环境的配置，以及 Node.js 的一些基础知识。

访问网站：https://nodejs.org/zh-cn/

nodejs 在线教程：https://www.runoob.com/nodejs/nodejs-tutorial.html

Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。

Ajax（可选）

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

Ajax 在线教程：https://www.runoob.com/ajax/ajax-tutorial.html

Axios

易用、简洁且高效的http库

访问地址：https://www.axios-http.cn/

Axios，是一个基于promise的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端(浏览端)则使用XMLHttpRequest。

第六阶段（可选）

前端工程化

• 构建工具 Webpack
• CSS 预处理器（Sass、Less）
• 自动化测试
• 持续集成 / 持续部署（CI/CD）

第七阶段（可选）

前端综合

• SEO相关（Next.js、Nuxt.js）
• HTTP协议
• 跨域通信
• 安全问题（CSRF、XSS）
• 浏览器渲染机制
• 异步和单线程
• 页面性能优化
• 防抖动（Debouncing）和节流阀（Throtting）
• 懒加载
• 前端错误监控
• 虚拟DOM

前端学习网站

B站

访问网站：https://www.bilibili.com

什么，你认为这是一个看搞笑鬼畜，二次元网站？不不不，它也是一个超级棒的学习网站，首推！！！最最最重要的是它是免费的。

慕课网

访问网站：https://www.imooc.com/

程序员的梦工厂，这也是我梦想起步的地方，上面不仅有基础入门课程，也有大量bat一线大厂大佬的实战课程，每一个实战项目都是收获满满，能力快速提升。

菜鸟教程

访问网站：https://www.runoob.com/

前端体系大量的入门知识，包含现在主流的技术等等，更厉害的是它还可以实时编写，查看运行的结果，也是强推。

掘金社区

访问网站：https://juejin.cn/

掘金社区是一个帮助开发者成长的社区，是一个面向互联网技术人的内容分享平台。很多互联网一线大厂的前端大佬们都活跃在掘金平台，是一个真正的前端人聚集地，满满的干货。还能结识到大神，对自己的技能提高很有帮助。

思否社区

访问网站：https://segmentfault.com/

这也是一个不错的代码社区平台，不过我觉得上面的前端信息会相对比较多，更新也快，可以当成一个在编程过程中遇到问题搜索解决办法的网站。

github

访问网站：https://github.com/

强大的平台，海量的开源程序，更有.md项目介绍，一句话，学习了理论知识就是要用在实战中，但是实战一开始不会怎么办，去下载几个开源项目，分析它们，学习作者的编程思维，快速提升自我。

iconfont

访问网站：https://www.iconfont.cn/

前端开发中经常要使用到图标来美化界面，使得用户体验变好，那么我们去哪里找图标呢，iconfont-阿里巴巴矢量图标库，大量的图标供你选择，多到你选不完。

总结

框架有时候很虚；熟练掌握 JavaScript 基础、核心源码，才是行走江湖、驰骋千里的关键。

前端技术的更新日新月异；前端框架的技术选型层出不穷；视觉审美的潮流不断更替；可视化效果酷炫无比；用户的运营体系逐渐精细化；适老化、无障碍化、青少年人群的诉求浮出水面；智能设备的升级和适配无穷无尽。所有的这一切，对前端领域和前端同学就一个要求：要折腾，爱折腾，反复折腾。

参考资料

前端开发学习路线图