大前端學習路線圖（附視訊及原始碼）

萬般皆下品，唯有學習高；

這是一篇非常詳細的且經典的前端學習路線圖

下面 下麪會按順序分模組給大家展示學習內容，讓大家學習的時候有成就感，學習更平滑；

 

第一階段：PC端頁面製作與動畫特效

學完第一階段就可以配合UI設計師進行專案開發完成pc端網頁的佈局製作與樣式設計實現。

一、html+css搭建頁面

• 1. HTML語意化標籤
• 2. Html標籤規範
• 3. Css樣式基礎
• 4. Css高階及佈局方案

二、PhotoShop切圖流程

• 1. Photoshop基本使用
• 2. 瞭解各種圖片格式及優缺點
• 3. 圖片切圖流程
• 4. PSD格式原始檔切圖流程
• 5. 設計圖轉頁面佈局實際操作

三、Css3動畫特效

• 1. Transition過渡
• 2. Transform變形
• 3. Animation動畫
• 4. 3D特效製作

第二階段：行動端頁面製作與響應式實現

這一階段主要是行動端網頁的佈局製作與樣式設計實現。可以適配各種手機尺寸，並能利用響應式驚醒行動端與PC端適配。

一、行動端概念與佈局

1. 行動端概念，如：PPI、畫素比

2. Viewport視口

3. 行動端適配方案

4. 行動端尺寸單位，如：rem、vw

5. 行動端佈局實際操作

二、響應式設計與實現

1. 媒體查詢@media

2. Flex彈性盒模型

3. 行動端常見裝置尺寸

4. 行動端互動實現

配套的學習視訊：

2019Web前端從入門到精通（HTML+CSS全套）

配套資源：

https://pan.baidu.com/s/1Pd932pPEKYMNCW2n4pUOZw

第三階段JavaScript與jQuery開發

這一階段是重中之重，這一階段主要是頁面行爲互動，實現網站中常見特效，如：輪播圖、索引標签、拖拽。並能配合UI和後端進行專案開發；

一、JavaScript開發

1. DOM、BOM、事件

2. 物件導向、演算法、動畫

3. Ajax、前後端通訊原理

4. 閉包、設計模式、錯誤處理

5. 常見特效製作及整站互動實現

配套學習視訊：

JavaScript基礎入門教學全集（強烈推薦）

配套資源：

https://pan.baidu.com/s/1vPYD82mB_AkBVB2q2Mk7qw 提取碼：dbch

二、jQuery開發

1. jQuery核心思想及特性

2. jQuery常見方法及使用

3. jquery外掛製作與jqueryUI元件使用

4. 4、編寫常見特效及jQuery原始碼分析

配套學習視訊：

jQuery入門教學全集（看過最詳細的）

配套資源：

https://pan.baidu.com/s/1R2n67Io55MgRKptsAO_7Lg

三、專案：純原生前端技術打造仿小米電商網站視訊

配套學習視訊：

純原生前端技術打造仿小米電商網站視訊

配套資料：

https://pan.baidu.com/s/1FopIvpNgUJZEfZ61jkrAWA 提取碼：ykpg

第四階段：H5高階框架技術開發；

這一階段是現在公司開發中常用的框架，這一階段學完就可以利用框架開發專案，實現單頁面應用開發。可以完成複雜的數據互動應用場景。具備獨立開大專案的能力。

一、Vue框架開發及專案

1、Vue基礎教學

a) Vue元件與Vue生命週期

b) 單檔案元件與腳手架搭建

c) Vue路由

d) Vuex狀態管理

e) Nuxt伺服器端渲染

f) 基於Vue的UI元件庫

配套學習視訊：

Vue全套教學全開源（強烈推薦）

配套資源：

https://pan.baidu.com/s/1ykVWPDQjKhQgkibHZ3cdhQ 提取碼：1zvr

二、Vue專案：

配套學習視訊：

Vue實戰專案之喵喵電影

配套資源：Vue實戰專案之喵喵電影https://pan.baidu.com/s/1HwOnFtgY_j7KzcCCPWbaQw

三、Vue常見問題講解：

配套學習視訊：

Vue.js常見問題講解

配套資源：

https://pan.baidu.com/s/1kBLiKL2lwS9d08TCc0WIkw 提取碼：3la7

二、React框架開發

1、 React基礎教學

a) JSX語法與Hooks新特性

b) React路由

c) Redux狀態管理

d) Next伺服器端渲染

e) 基於React的UI元件庫

配套學習視訊：

React入門到大神

配套資源：

https://pan.baidu.com/s/18j0EtU7pLlcd1jMlDDSNBg 提取碼：vvur

第五階段：全棧前後端技術開發

學好了這個階段的技術恭喜你就能進行前後端全棧式開發了，能獨立完成一箇中小型專案的前後台。

一、Nodejs技術

1. Node內建API

2. Node檔案操作與伺服器搭建

3. Express框架與KOA框架

4. Mongodb數據庫

5. Npm的功能使用

二、其他後端技術

1. 初始Java或PHP語言

2. 表達式與數據型別

3. 語句結構與陣列

4. 類與物件

5. this、static屬性、方法

6. 抽象類、介面與多型

配套學習視訊：

Node.JS入門到大神

配套資源：

https://pan.baidu.com/s/13FCVc68ZnFdMhHkZtN1f7g 提取碼：hp2l

三、NodeJS+Express+MongoDB實戰專案

配套學習視訊：

NodeJS+Express+MongoDB實戰專案

配套資源：

https://pan.baidu.com/s/1YfcorhIR9etRJ_vxsvy0ig

第六階段：混合應用技術開發

一、React Native技術

1. RN開發環境準備與基礎元件介紹

2. 多元件整合應用實現TodoList

3. 引入路由，通用模組及列表頁面佈局

4. RN內建API詳解

5. RN內建元件與專案上線流程

二、微信小程式開發

1. 小程式元件

2. 小程式API

3. 小程式雲函數

4. Wepy小程式開發框架

5. MpVUe小程式開發框架

配套學習視訊：

輕鬆玩轉微信小程式開發

配套資料

https://pan.baidu.com/s/17IabhW0SWHnFhiZ3mDCduw

三、小程式專案

配套視訊教學：

小程式全棧開發之喵喵交友

配套資料：

https://pan.baidu.com/s/1ggShoLPpbryYc8oKbL1rCQ 提取碼：dlib

四、Mpvue小程式框架

配套視訊教學：

小程式框架Mpvue入門教學

配套資料：

小程式框架Mpvue入門教學（全開源） https://pan.baidu.com/s/1g_l9NEXISlgQq2DRSvTCsQ

第七階段：H5大前端技術開發

一、數據視覺化技術

1. 數據視覺化基礎

2. Echars、Hignchars

3. D3.js入門

4. D3,js進階

5. D3.js選擇集與數據

6. D3.js高階應用

7. D3,js應用工具：NVD3、N3-chars

二、Flutter技術

1. 介面結構與基礎部件

2. 佈局與表單

3. Dart語法

4. Widgets容器

5. 網路請求與路由

配套視訊教學：

最新Flutter全套視訊

配套資源：

https://pan.baidu.com/s/1Zvj164kzdUy3KrUvNU0s-A

三、Electron技術

1. Electron入門

2. Electron偵錯技巧

3. Electron核心API

4. Electron與React、vue整合開發

5. 構建Windows、mac應用

配套視訊教學：

Electron-HTML+CSS+JS構建跨平臺桌面應用程式

配套資源：

https://pan.baidu.com/s/1zS8Gr_lnKn8DNlQVB1JcHA 提取碼：5wt8

第八階段：H5架構技術

一、開發工具集伺服器技術

1. 掌握Webpack等工具搭建專案

2. Git工具及github管理

3. 阿裡雲ECS：Linux伺服器

4. Nginx：Web伺服器

5. Docker：容器化應用

6. Serverless：無伺服器技術

配套視訊教學：

最新Webpack4.0教學

配套資料：

https://pan.baidu.com/s/1V9kX7e8-FCjVrmUDzL9A-Q 提取碼：etxn

二、安全及效能優化

1. 前端攻擊demo詳解

2. 前端監控異常

3. 測試前端程式碼線上的實際效能

4. SEO：搜尋引擎優化

5. Chrome中的高階偵錯功能