前端开发工程师从入门到精通学习过程及资源总结（持续更新中）

职位名称：前端开发工程师

学习概要：一、先了解基础，html/css/JavaScript是基础。html/css就是作静态页面的，javascript是作动态的。

二、学习框架：jQuery（基于DOM，必学），三大主流框架：Vue、React、Angular。

其余框架：Bootstrap（CSS框架），jquery-ui，Echarts（制图）

vue框架：Element-UI，iview

nodejs框架：express, koa

三、后台语言：Node.js(事件驱动),Java（运用普遍）

1、辅助工具

一、编程工具：(1)sublime text3，简单方便，下一个安装就好了。若是想用的更加方便，能够百度一下经常使用的插件，安装几个最经常使用的就够了。

      用Package Control安装插件的方法： 

（1）按下Ctrl+Shift+P调出命令面板

（2）输入install 调出 Install Package 选项并回车，而后在列表中选中要安装的插件

下载安装及插件参考：sublime text 3下载与安装详细教程

（2）visual studio code：vscode官网

开始用sublime，目前转用vs code，比sublime更加方便

二、制图：ECharts:直接进官网看教程，简单的能够在线制做后取用代码;能够参考博客EChart.js 简单入门

　　iconfont:阿里巴巴矢量图库，vue项目中引入字体库（icon）（详细步骤）

三、调试：在任意浏览器中按F12（工具里面的开发者工具），或者点右键检查，会出现控制台，推荐谷歌浏览器

四、http请求的资源库：JSON库、Translate API、Bootswatch样式

五、GitHub：代码托管，团队合做的利器，开发者能够上传本身的代码，也能够下载别人的代码，具体使用参考博客：使用Git将本地项目上传到Github操做详解、Git克隆、修改、更新项目，及查看项目地址命令

SVN：如何在Eclipse上使用SVN,安装、提交、拉取代码、解决冲突等操做

六、码云：基于 Git 的彻底免费的代码托管服务，与 github 的对比

     优势：服务器在国内，在国内访问速度比github快不少，能够免费让本身的仓库他人不可见，可是否安全就不知道了。访问速度很快，支持svn，git两种方式，免费帐户一样能够创建 私有项目，而 github 上要创建私有项目必须 付费。

     缺点：每一个仓库有1G的容量限制，把Unity工程弄上去一下就超了。

2、技术交流社区

一、博客园：

推荐博客：古兰精 ，bergw

二、CSDN： 

三、MDN

四、其余

推荐博客：阮一峰的博客、张鑫旭前端开发博客、廖雪峰的官方网站

3、HTML/CSS

一、先看慕课网的基础教程：HTML+CSS基础课程（很是适合零基础入门）

其余教学视频：极客学园（须要会员，我没有看）

网易云课堂：从零玩转HTML5前端+跨平台开发（基础知识比较全）、web前端开发HTML+CSS精英班（讲的比较有趣，容易入门）

我看的网易云课堂的视频，基础比较全面，讲解的也详细。由于先学的慕课网，这个视频我是跳着看的。 

二、学习CSS布局

学习完上面的课程能够本身作静态网页了，不过免费课程里面对新增的flex布局讲解的比较少，基本是一带而过，学习flex布局能够看阮一峰的博客。我的感受flex布局很是实用，像淘宝网的九宫格图片（店铺装修里面一行显示几件商品）、移动端等，使用flex布局很是方便。

三、响应式布局

简而言之，就是一个网站可以兼容多个终端——而不是为每一个终端作一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

流式布局和弹性布局及配合媒体查询 是 响应性布局的最好方式。

四、文字笔记类知识：菜鸟教程，w3school

html/css知识点很是多，所有记的清清楚楚不太可行，有个印象以后，把这两个网站当成字典，须要的时候翻一翻。

五、CSS预处理器：sass、less、stylus

学习一种便可，我用的stylus：stylus使用文档总结：选择器+变量+插值+运算符+混合书写+方法

4、javascript

一、先看智能社的视频教程：JavaScript从入门到精通 （我的以为这个视频讲的最好，但基础不够全面）、从零玩转JavaScript全栈开发（这个视频基础很全面）

二、js基础学习以后能够作点小游戏，我参考下面的实战视频中的小蜜蜂游戏作了一个气球射击游戏。

网易云课堂的实战视频教程：HTML5前端开发实战

三、ES6：也称为ECMAscipt2015，三大主流框架都是以ES6为基础的，因此不管是深刻学习JS，仍是想学习基于数据的框架，这都是必学的。

四、书籍推荐：《JavaScript权威指南》（[美] David Flanagan 著，淘宝前端团队 译，机械工业出版社）

5、jQuery框架

一、就是封装了一些JS的方法，jQuery官网下载JS文件

二、网易云视频教程：从零玩转jQuery原理和Ajax

三、作点游戏练习一下，我作了狂拍灰太狼游戏。上面的实战视频里的英雄难过棍子关游戏就是用的jQuery。

四、本身作的小游戏源码地址：初学小游戏源码。

      依公司要求本身写的控件：基于jquery的可查询多级select控件（可记录历史选择）

6、vue框架

 一、vue.js是一个构建数据驱动的 web 界面的渐进式框架。官网讲解的比较详细：Vue.js

    不过，学vue以前要先学习ES2015(ES6),看这篇博客就够了（有上、下两篇）：ES6/ES2015核心内容（上）、ES6/ES2015核心内容（下）

   若是学过ES6，能够直接跳过

二、网易云视频教程：两个视频虽然是不一样人讲的，但重叠的不算多，知识互补

     （1）建议先看从零玩转Vue2.x与大项目实战（从ES6经常使用知识点讲起，若是没有学习ES6能够从头看起，此视频只讲了基础）

     （2）再看Vue2.0小白入门教程（直接讲运用，要想知道为何这么用仍是得先学习ES6，但这里有讲到搭建脚手架，工做中作项目通常用的是脚手架）

　 （3）Vue实战：Vue实战项目(在线翻译)

       (4)  单知识博客：深刻理解vue中的slot与slot-scope

三、vuex：vue的状态管理模式，最大的实用点是解决非父子组件之间的通讯问题

     vuex最简单、最详细的入门文档、vuex2.0 基本使用(1) --- state、彻底掌握 Vuex 图文视频教程

四、axios（封装ajax）和mockjs（模拟后台数据）

    （1）mock大法好、Mock.js使用、如何在Vue项目中使用Mockjs，模拟接口返回的数据，实现先后端分离独立开发、vue项目中使用mockjs模拟接口返回数据

    （2）Axios 中文说明，博客：Axios使用文档总结、axios

      (3) axios调取本地mock模拟数据详细讲解

五、ElementUI:一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库; Iview:比较全的ui组件库，有基于vue.js的，有专门移动端用的，也有小程序的；

六、案例：使用vuejs2.0和element-ui 搭建的一个后台管理界面、Vue2.0 + Element-UI + WebAPI实践：简易我的记帐系统、vue2.0实现注册登陆步骤详解

七、Node

 一、NPM下载东西，具体安装使用看的这篇博客：安装Node.js、npm和环境变量的配置；node中文网

 二、视频资源：Node.js进阶教程第一步(基础篇)（免费资源）

 三、项目经验：全栈02 Koa2+Vue2+MySQL 全栈的入门尝试

8、打包工具（Webpack）

代码优化打包是必不可少的，上线前将代码打包，减小代码体积，提升速度，最出名的就是webpack

一、webpack 是一个现代 JavaScript 应用程序的静态模块打包器。webpack官网 

二、JSCompress: 合并压缩代码的软件，老项目优化用的这个。JSCompress官网

9、Java