前端详细的规划（自学实用）

前端开发工程师

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

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

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

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

vue框架：Element-UI，iview

nodejs框架：express, koa

3、后台语言：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更加方便

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

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

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

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

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

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

二、技术交流社区

1、博客园：

推荐博客：古兰精 ，bergw

2、CSDN： 

3、MDN

4、其他

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

三、HTML/CSS

1、先看慕课网的基础教程：HTML+CSS基础课程（非常适合零基础入门）

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

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

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

2、学习CSS布局

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

3、响应式布局

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

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

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

html/css知识点非常多，全部记的清清楚楚不太可行，有个印象之后，把这两个网站当成字典，需要的时候翻一翻。

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

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

四、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

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

5、ElementUI:一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

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

七、Node

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

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

八、打包工具（Webpack）

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

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

九、Java