2019 最新Web前端工程师学习路线

学习路线图

阶段一

常用开发工具介绍

WebStorm
Dreamweaver
Hbuilder
Editplus
Sublime
Vim（高手使用较多）
…

HTML+CSS

HTML
属性
事件
标签
字符集
…
CSS
CSS基础教程
CSS样式
背景
文本
字体
链接
列表
表格
轮廓
…
CSS框模型
内边距
边框
外边距
…
CSS定位
相对定位
绝对定位
浮动
CSS选择器
元素选择器
选择器分组
类选择器
ID选择器
属性选择器
后代选择器
子元素选择器
相邻兄弟选择器
伪类
伪元素
…
CSS高级
对齐
尺寸
分类
导航栏
图片库
图片透明
盒子模型
媒体布局
…
…

HTML5+CSS3

HTML5
HTML5视频
HTML5音频
HTML5拖放
HTML5画布
HTML5 SVG
HTML5地理定位
HTML5 Web存储
HTML5 应用缓存
HTML5表单
…
CSS3
CSS3边框
CSS3背景
CSS3文本效果
CSS3字体
CSS3 2D转换
CSS3 3D 转换
CSS3 过渡
CSS3 动画
CSS3 多列

JavaScript

认识JavaScript
基本语法
变量
数据类型
字符串
数字
布尔
数组
对象
Null
Undefined
函数
内置函数
自定义函数
运算符
流程控制
DOM对象
String
Array
Date
Boolean
Math
Number
…
BOM对象
WIndow
Navigator
Screen
History
Location
…
综合实例

阶段二

JavaScript进阶，主要学习构造函数，原型对象，继承的多种实现方式，原型链，函数的本质，闭包，沙箱等

DOM+BOM综合演练

网页特效

Jquery学习

基础语法
选择器
基本选择器
层次选择器
过滤选择器
表单选择器
…
DOM操作
查找节点
创建节点
插入节点
删除节点
复制节点
替换节点
包裹节点
属性操作
样式操作
…
事件
事件绑定
事件冒泡
…
动画
show、hide
fadeIn、fadeOut
slideUp、slideDown
自定义动画animate
动画回调以及停止动画
常用工具
浏览器及特性检测
数组和对象操作
…
Ajax
Jquery插件编写

ES6进阶

Layer UI，主要学习栅格布局，图标，动画，按钮，表单，导航，选项卡，进度条，面板，表格，时间线等

Bootstrap，同上

animate.css学习（扩展）

PS切图学习

…

阶段三

Vue

Vue基础
模版语法
计算属性侦听器
Class与Style绑定
条件/列表渲染
事件处理
表单输入绑定
组件基础、注册
Prop
自定义事件
…
Vuex
State
Getter
Mutation
Action
Module
…
Vue-router
认识路由
动态路由
嵌套路由
编程式导航
路由组件传参
…
axios认识axios，全局配置，发送POST、GET请求等

React

认识React
React元素渲染
JSX
组件
State
Props
事件处理
条件渲染
列表
组件API
组件声明周期
…

Node

基础
console（控制台）
crypto（加密）
debugger（调试器）
fs（文件系统）
http（网络）
os（操作系统）
path（路径）
…
高级
NPM介绍及使用
MVC模式简介
Express框架学习
链接Mysql
链接Redis
项目实战

webpack

概念，主要讲什么是入口，出口，loader，插件等
入口
单个入口语法
对象语法
常见场景
…
输出
用法
多个入口起点
高级进阶
模式
development
production
loader
实例
配置
…
插件
剖析
用法
配置
配置
基本配置
多个Target
使用其他语言配置
模块
…
…

阶段四（扩展部分，了解即可）

Mysql

阶段一
认识mysql
安装mysql
创建数据库、数据表
学习常用的SQL命令，完成增删查改
阶段二
学习Mysql关联查询，子查询等
学习Mysql常用函数
学习Mysql分组、分页、排序等
阶段三
学习Mysql高级查询
了解存储过程，自定义函数等
了解Mysql配置文件
…

Redis

认识Redis
学习redis的数据类型
redis常用操作
redis事务
…

阶段五

项目管理篇

SVN使用
认识svn
安装
生命周期
启动模式
创建版本库
检出操作
解决冲突
提交操作
版本回退
查看历史
分支
标签
GIT使用
认识git
安装配置
工作流程
工作区、暂存区和版本库
创建仓库
基本操作
分支管理
查看历史等
标签
github

扩展部分

小程序
了解小程序开发流程
视图容器
view
scroll-view
movable-view
cover-view
cover-image
基础内容
icon
text
rich-text
progress
表单组件
button
checkbox
form
input
label
picker
picker-view
radio
slider
switch
textarea
导航
navigator
function-page-navigator
媒体组件
audio
image
video
camera
live-player
live-pusher
地图（map）
画布（canvas）
开放能力
open-data
web-view
ad
official-account
apicloud（移动app开发）
认识apicloud
开发工具讲解
端API
API对象
设备访问
功能扩展
界面布局
导航菜单
小程序模块
云服务对接
云API
数据云API
统计云API
推送云API
云API SDK
小程序模块使用
…

常用框架使用篇

iview （vue框架）
element ui （vue框架）
echarts (百度图标库)
阿里巴巴开源图标使用
Sass学习
Swiper学习
zoom.js 学习
…

综合项目实战

教务管理系统（node+express+mysql）实现