入门前端？前端学习路线图汇总

序言

有许多爸爸妈妈想进阶后端，但后端技术现如今这般繁复，那我们究竟应该怎样自学呢？期望这篇走线该文能对你略有协助。

一、后端GUI:

后端GUI类型多样，这里给我们如是说两款开发人员最常见的GUI。

1.1 Visual Studio Code

全称 VS Code，是Web开发人员中最畅销的文本GUI。VS Code完全免费开放源码，且它的可订制性是让开发人员最钟爱的机能，它全力支持数百个应用程序和主轴，开发人员能加装这些应用程序和主轴以更进一步更进一步增强其机能，我所推荐老师们采用它。

1.2 Sublime Text

Sublime反之亦然具有重量轻速率慢，不挤占大批缓存的竞争优势，也能通过加装应用程序来扩充它。不过Sublime是收费项目的，虽然能完全免费浏览和采用，但会急速的接到两条弹出最新消息，秦马六买回许可。因为其单纯易上手，新老师能考量使用。

1.3 WebStorm

Webstorm软件系统了许多机能，机能较为强悍，采用较为新体验较为好。但是软件系统的小东西太少，对笔记本电脑的要求也高。实用性较为低不然，关上速率会较为卡慢。不该他们亲自动手实用性GUI的喽老师对他们笔记本电脑操控性自信心不然能考量采用它。

二、后端三大件

好了，坚信你已经开始下决心要成为后端天神了，那咱第二步就是把后端的核心装备拿下，它们分别是Html,CSS和JavaScript。

2.1 HTML(5)

html是用来编写网页代码结构的，它有一系列的标签用于显示不同的页面元素，比如用<a/>显示一个超链接，<img/>显示一张图片。

2.2 CSS(3)

但只是单纯用html只能写页面的内容，不能进行排版和美化样式，如果让网页变得漂亮，需要 css。css是用来美化html编写的页面的，通过一些语法选择特定的html标签，然后用一些属性来给它们添加样式，比如文字颜色，背景，位置，边距，定位等等，还能添加动画效果让页面显示的栩栩如生。

2.3 JavaScript

在学完html,css之后，咱就能写漂亮的页面了，那么接下来就是需要自学JavaScript，让网页能和人进行互动，比如点击按钮弹出个对话框，处理用户输入的表单信息，添加一些复杂的动画等等。它能直接操作html元素，给网页开发提供了无限可能。

三、UI 框架

UI框架提供了页面的基本UI样式和布局系统，比如按钮、对话框、轮播图，省了他们去开发，在本阶段你能自学一下Boostrap, 用最快最少的时间自学一套UI框架并感受响应式布局。

响应式布局:

现在手机和平板差不多要比笔记本电脑都流行了，所以一个网站要适应不同尺寸的屏幕，有这种特性的网站就叫做响应式网站。实现这种响应式网站的CSS布局方式便是响应式布局。

四、Ajax

AJAX通过在后台与服务器进行少量数据交换，使网页实现异步更新。

在日常的网页开发过程中，ajax无处不在，比如我们在购物时候看到的商品列表都是实时更新的数据，这时我们

在此阶段，我们还需要自学当前后端的流行库axios，它协助研发人员对ajax进行了封装，让开发更高效。

五、ES6

ES6是JavaScript语言的下一代标准，已经在2015年6月正式发布了。所以又称ES2015。它的目标，是使得JavaScript语言能用来编写复杂的大型应用程序，成为企业级开发语言。

单纯理解ES6就是JavaScript的高级语法，在开发过程中十分常见，也是我们自学的重中之重。有精力的老师所推荐看一下《ES6 标准进阶》这本书，能让你对ES6的知识体系有更好的了解。

六、Git

Git是一款完全免费、开放源码的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。单纯说就是Git工具作用是来协助管理你的代码，让你的代码在管理上更清晰。

在此阶段我建议我们都创建一个GitHub账号，GitHub是软件源代码托管服务平台，我们能将他们写过的代码放到GitHub上，以后一定会是一笔宝贵的财富。

七、Node

Node是一个服务器端的JS运行环境，能让开发人员通过JS做后台服务器编程开发。我们在笔记本电脑上装上Node环境就能写后端啦，之后就能出门自称全栈大佬啦。

除了基本的搭建服务器、增删改查知识点外，还要学会采用npm装包（Node环境加装完成后就能采用npm指令装包啦）、文件的导入导出等，为以后三大框架的自学做准备。

后端常见的node框架所推荐是express、koa，有余力的老师能自学一下。

八、后端三大框架

8.1 React

React, Facebook出品，正式版推出是在2013年，React引入了一种组件驱动、函数式和声明式的编程风格，以单页Web应用创建交互式用户界面。通过虚拟DOM，React 提供了非常快的渲染速率，只需渲染发生变化的部分，而不用渲染整个页面。React的另一个基本特点是采用更单纯的JSX语法，而不是JavaScript。

尽管自学React比其他框架要复杂一些，但是React拥有一个庞大的开发人员社区、丰富的自学资源，并被世界各地广泛采用。

不管是Stack Overflow开发人员调查，还是State of JS调查，在后端JavaScript框架榜单中，React 始终名列前茅，一直是最畅销的后端JavaScript框架。

8.2 Vue

Vue.js是一种轻量级、开放源码的JavaScript框架，用最小的努力来构建创造性的用户界面和高操控性单页 Web 应用。

Evan Yu在2014年首次发布了Vue，他是一名谷歌开发人员，从Angular中获得了灵感，以 Vue.js的形式提供了一个单纯、轻量级、高效的替代方案。Vue从React和Angular获得了许多特性，但是这些特性已经得到了大幅改进，从而提供了一个更好、更易用、更安全的框架。Vue提供了Angular所见的双向数据绑定，以及React所见的虚拟 DOM。

反之亦然，Vue也非常灵活，使其能够像Angular那样作为一个完整的端到端框架，也能像 React那样作为一个有状态的视图层。所以Vue的主要竞争优势在于它的渐进式性质，它更单纯，更容易上手，并且不会做太少限制来满足开发人员的需求。Vue在过去几年中迅速流行起来，取代了Angular和React复杂的统治地位，成为最好的JavaScript框架。有些全球最大的公司，比如 Adobe、苹果、宝马等都采用了 Vue。

8.3 Angular

Angular是由谷歌工程师Misko Hevery和Adam Abrons在 2010 年创建的，名为 AngularJS（或 Angular 1）。AngularJS曾广为人知，也曾最畅销，但React的出现暴露了它严重的缺陷，后来被人们遗忘了。因此，在2016年，AngularJS完全从零开始重写，并更名为 Angular2（或全称Angular）。

AngularJS（Angular 1）的灵感来自React。它们有了很大的变化，最重要的变化就是从MVW（Model-View-Whatever）架构转变为类似React的面向组件的架构。现如今，Angular已经成为构建企业应用最安全的JavaScript框架典范；超过100万的网站都在采用Angular，包括谷歌、福布斯、IBM和微软。

8.4 我们怎样选？

据统计2021后端框架榜单中： React > Vue > Angular, 那我们究竟怎样选择？

面对大佬：都学。

面对咸鱼：React/Vue两框架在国内采用较多，建议先学其中之一，后续把另一个补充。

九、Webpack

后端构建工具有许多种，目前最广泛应用的依旧还是Webpack。

Webpack是一个后端资源加载和打包工具。所谓的模块就是在平时的后端开发中，用到一些静态资源，如JavaScript、CSS、图片等文件，webpack就将这些静态资源文件称之为模块。 webpack全力支持AMD和CommonJS，以及其他的一些模块系统，并且兼容多种JS书写规范，能处理模块间的依赖关系，所以具有更强悍的JS模块化的机能，它能对静态资源进行统一的管理以及打包发布。

作为一款 Grunt和Gulp的替代产品，Webpack受到大多数开发人员的喜爱，因为它能够编译打包CSS，做CSS预处理，对JS的方言进行编译，打包图片，代码压缩等等。

十、TypeScript

TypeScript 是微软编写的一款带类型的 JavaScript 语言，它的代码能编译成普通的 JavaScript，但是编写的时候全力支持强类型，并且全力支持完全面向对象的形式。它的好处在于带有了类型之后，代码更容易维护，适合大型项目的开发。

目前后端的主流框架都是采用TypeScript编写，比如React和Vue3，故后端对TypeScript的要求也随之增高。

结语

一起努力，顶峰相见！！！