前端開發工程師從入門到精通學習過程及資源總結（持續更新中）

職位名稱：前端開發工程師

學習概要：一、先了解基礎，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