前端开发工程师从入门到精通学习过程及资源总结（持续更新中）
职位名称：前端开发工程师
学习概要：1、先了解基础，html/css/JavaScript是基础。html/css就是做静态页面的，javascript是做动态的。
2、学习框架：jQuery（基于DOM，必学），三大主流框架：Vue、React、Angular。
其他框架：Bootstrap（CSS框架），jquery-ui，Echarts（制图），uni-app
vue框架：Element-UI，iview，ant-design-vue
nodejs框架：express, koa
react框架：Ant Design
3、js超集：typescript
4、后台语言：Node.js(事件驱动),Java（运用广泛）
一、辅助工具
1、编程工具：
(1)、sublime text3，简单方便，下一个安装就行了。如果想用的更加方便，可以百度一下常用的插件，安装几个最常用的就够了。
（1）按下Ctrl+Shift+P调出命令面板
（2）输入install 调出 Install Package 选项并回车，然后在列表中选中要安装的插件
下载安装及插件参考：sublime text 3下载与安装详细教程
（2）、visual studio code：vscode官网
（3）、HBuilder X
开始用sublime，目前转用vs code，比sublime更加方便，移动端开发使用HBuiderX
2、制图：ECharts:直接进官网看教程，简单的可以在线制作后取用代码;可以参考博客EChart.js 简单入门
iconfont:阿里巴巴矢量图库，vue项目中引入字体库（icon）（详细步骤）
3、调试：在任意浏览器中按F12（工具里面的开发者工具），或者点右键检查，会出现控制台，推荐谷歌浏览器
4、http请求的资源库：JSON库、Translate API、Bootswatch样式
5、GitHub：代码托管，团队合作的利器，开发者可以上传自己的代码，也可以下载别人的代码，具体使用参考博客：使用Git将本地项目上传到Github操作详解、Git克隆、修改、更新项目，及查看项目地址命令
SVN：如何在Eclipse上使用SVN,安装、提交、拉取代码、解决冲突等操作
6、码云：基于 Git 的完全免费的代码托管服务，与 github 的对比
优点：服务器在国内，在国内访问速度比github快很多，可以免费让自己的仓库他人不可见，但是否安全就不知道了。访问速度很快，支持svn，git两种方式，免费账户同样可以建立 私有项目，而 github 上要建立私有项目必须 付费。
缺点：每个仓库有1G的容量限制，把Unity工程弄上去一下就超了。
二、技术交流社区
1、博客园：
2、CSDN：
3、MDN
4、其他
推荐博客：阮一峰的博客、张鑫旭前端开发博客、廖雪峰的官方网站
三、HTML/CSS
1、先看慕课网的基础教程：HTML+CSS基础课程（非常适合零基础入门）
其他教学视频：极客学园（需要会员，我没有看）
网易云课堂：从零玩转HTML5前端+跨平台开发（基础知识比较全）、web前端开发HTML+CSS精英班（讲的比较有趣，容易入门）
我看的网易云课堂的视频，基础比较全面，讲解的也详细。因为先学的慕课网，这个视频我是跳着看的。
2、学习CSS布局
学习完上面的课程可以自己做静态网页了，不过免费课程里面对新增的flex布局讲解的比较少，基本是一带而过，学习flex布局可以看阮一峰的博客。个人感觉flex布局非常实用，像淘宝网的九宫格图片（店铺装修里面一行显示几件商品）、移动端等，使用flex布局非常方便。
3、响应式布局
简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
流式布局和弹性布局及配合媒体查询 是 响应性布局的最好方式。
html/css知识点非常多，全部记的清清楚楚不太可行，有个印象之后，把这两个网站当成字典，需要的时候翻一翻。
5、CSS预处理器：sass、less、stylus
学习一种即可，我用的stylus：stylus使用文档总结：选择器+变量+插值+运算符+混合书写+方法
elment-ui用的sass,ant-design用的less
四、javascript
1、先看智能社的视频教程：JavaScript从入门到精通 （个人觉得这个视频讲的最好，但基础不够全面）、从零玩转JavaScript全栈开发（这个视频基础很全面）
2、js基础学习之后可以做点小游戏，我参考下面的实战视频中的小蜜蜂游戏做了一个气球射击游戏。
网易云课堂的实战视频教程：HTML5前端开发实战
3、ES6：也称为ECMAscipt2015，三大主流框架都是以ES6为基础的，所以无论是深入学习JS，还是想学习基于数据的框架，这都是必学的。
4、书籍推荐：《JavaScript权威指南》（[美] David Flanagan 著，淘宝前端团队 译，机械工业出版社）
五、jQuery框架
1、就是封装了一些JS的方法，jQuery官网下载JS文件
2、网易云视频教程：从零玩转jQuery原理和Ajax
3、做点游戏练习一下，我做了狂拍灰太狼游戏。上面的实战视频里的英雄难过棍子关游戏就是用的jQuery。
4、自己做的小游戏源码地址：初学小游戏源码。
依公司要求自己写的控件：基于jquery的可查询多级select控件（可记录历史选择）
六、vue框架
1、vue.js是一个构建数据驱动的 web 界面的渐进式框架。官网讲解的比较详细：Vue.js
不过，学vue之前要先学习ES2015(ES6),看这篇博客就够了（有上、下两篇）：ES6/ES2015核心内容（上）、ES6/ES2015核心内容（下）
如果学过ES6，可以直接跳过
2、网易云视频教程：两个视频虽然是不同人讲的，但重叠的不算多，知识互补
（1）建议先看从零玩转Vue2.x与大项目实战（从ES6常用知识点讲起，如果没有学习ES6可以从头看起，此视频只讲了基础）
（2）再看Vue2.0小白入门教程（直接讲运用，要想知道为什么这么用还是得先学习ES6，但这里有讲到搭建脚手架，工作中做项目一般用的是脚手架）
（3）Vue实战：Vue实战项目(在线翻译)
(4) 单知识博客：深入理解vue中的slot与slot-scope
3、vuex：vue的状态管理模式，最大的实用点是解决非父子组件之间的通信问题
vuex最简单、最详细的入门文档、vuex2.0 基本使用(1) --- state、完全掌握 Vuex 图文视频教程
4、axios（封装ajax）和mockjs（模拟后台数据）
（1）mock大法好、Mock.js使用、如何在Vue项目中使用Mockjs，模拟接口返回的数据，实现前后端分离独立开发、vue项目中使用mockjs模拟接口返回数据
（2）Axios 中文说明，博客：Axios使用文档总结、axios
5、ElementUI:一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库; Iview:比较全的ui组件库，有基于vue.js的，有专门移动端用的，也有小程序的；AntDesign:样式好看，组件齐全，但用法有点沿用react的，刚开始用会有点不习惯
6、案例：使用vuejs2.0和element-ui 搭建的一个后台管理界面、Vue2.0 + Element-UI + WebAPI实践：简易个人记账系统、vue2.0实现注册登录步骤详解
七、Node
1、NPM下载东西，具体安装使用看的这篇博客：安装Node.js、npm和环境变量的配置；node中文网
2、视频资源：Node.js进阶教程第一步(基础篇)（免费资源）
3、项目经验：全栈02 Koa2+Vue2+MySQL 全栈的入门尝试
八、打包工具（Webpack）
代码优化打包是必不可少的，上线前将代码打包，减少代码体积，提高速度，最出名的就是webpack
1、webpack 是一个现代 JavaScript 应用程序的静态模块打包器。webpack官网
2、JSCompress: 合并压缩代码的软件，老项目优化用的这个。JSCompress官网
九、TypeScript
TypeScript 由微软开发的自由和开源的编程语言,TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上
TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。
TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。
十、uni-app
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台
uni-app开发微信小程序比微信官方的更加高效，移动端一套代码适应各终端
推荐UI库：uView
推荐使用工具HBuilderX（和uni-app一样由DCloud公司开发）,可以直接创建带uView的uni-app项目
十一、React
文章推荐：浅析装饰器及在React中的应用
十二、前端进阶知识
1、服务端渲染
掘金用的nuxtjs
2、web terminal
vscode用的xterm.js，博客推荐：用 xterm.js 实现一个简易的 web-terminal ！
3、微前端应用
qiankun: 知乎介绍：目标是最完善的微前端解决方案 - qiankun 2.0
基于 qiankun 的微前端最佳实践（图文并茂） - 从 0 到 1 篇
4、docker
