跟著路線圖認(rèn)真堅(jiān)持學(xué)習(xí)從前端小白到大神不是夢，0基礎(chǔ)看這一篇足矣！

學(xué)們記得加關(guān)注點(diǎn)贊收藏，自學(xué)路上不迷糊！

新手自學(xué)前端路線圖速覽

第一階段：前端入門網(wǎng)頁基礎(chǔ)

html5+css3 ??頁面布局實(shí)戰(zhàn)

第二階段：前端入門開發(fā)內(nèi)功

javascript（基礎(chǔ)+進(jìn)階）?? ES6????Ajax ?? Promise ??Git ??node.js ??PC端全棧開發(fā)實(shí)戰(zhàn)

第三階段：前端高級框架技術(shù)

vue2+vue3 ??vue實(shí)戰(zhàn)項(xiàng)目???Pinia ??React ??React實(shí)戰(zhàn)項(xiàng)目

第四階段，混合應(yīng)用開發(fā)技術(shù)

微信公眾號 ??微信小程序 ??微信小程序?qū)崙?zhàn)項(xiàng)目???uni-app ??uni-app實(shí)戰(zhàn)項(xiàng)目?

第五階段：大前端的架構(gòu)技術(shù)

webpack5 ??Vite2 ??typescript架構(gòu)?? HarmonyOS app

下面就讓我們開始了解前端開發(fā)的進(jìn)階之路～

如果你不想看文字版，請戳 ??

前端學(xué)習(xí)詳細(xì)路線

前端計(jì)算機(jī)常識

課程針對計(jì)算機(jī)基礎(chǔ)薄弱的小白推出的計(jì)算機(jī)入門常識課，內(nèi)容涵蓋計(jì)算機(jī)的硬件、操作系統(tǒng)、存儲單位與二進(jìn)制、軟件的安裝和解壓、IP、服務(wù)器、DNS、域名、環(huán)境變量、字符亂碼、linux操作系統(tǒng)、鍵盤指法、計(jì)算機(jī)英語、多進(jìn)程和多線程、系統(tǒng)的常用設(shè)置、使用瀏覽器、CMD命令、office辦公軟件等計(jì)算機(jī)常識。貼近實(shí)際需求，氛圍輕松愉快，是計(jì)算機(jī)小白入門前必學(xué)的常識科普課。學(xué)完本課程，可以全面掌握計(jì)算機(jī)的基礎(chǔ)常識，為接下來的編程學(xué)習(xí)打好鋪墊。

前端核心基礎(chǔ)入門

下面的視頻是專門為零基礎(chǔ)前端學(xué)習(xí)者準(zhǔn)備的入門學(xué)習(xí)指南，一點(diǎn)基礎(chǔ)沒有也可以直接看！你將從零開始學(xué)習(xí)網(wǎng)頁端頁面搭建，毫不費(fèi)力掌握前端開發(fā)的初級核心基礎(chǔ)。

第一階段：前端入門網(wǎng)頁基礎(chǔ)

html5+css3→ 頁面布局實(shí)戰(zhàn)（響應(yīng)式/移動端/pc端頁面）

1、? 前端入門基礎(chǔ)核心必看html+css

這是入門前端最基礎(chǔ)的內(nèi)容。學(xué)會后，就能達(dá)到初級Web前端工程師水平。熟悉了前端開發(fā)的HTML與CSS基礎(chǔ)知識，就能夠配合UI設(shè)計(jì)師進(jìn)行項(xiàng)目布局開發(fā)了。

2、? 頁面布局實(shí)戰(zhàn)

有了第一步的基礎(chǔ)知識，你就可以實(shí)戰(zhàn)各種頁面布局了。學(xué)會后，更加夯實(shí)初級Web前端工程師水平，能夠完成各種PC端與移動端網(wǎng)頁布局與樣式設(shè)計(jì)實(shí)現(xiàn)了。

第二階段：前端入門開發(fā)內(nèi)功

javascript（基礎(chǔ)+進(jìn)階）→ ES6→ Ajax→ Promise→Git→node.js→PC端全棧項(xiàng)目開實(shí)戰(zhàn)

1、JavaScript(基礎(chǔ)+進(jìn)階)

本視頻主打內(nèi)容最全最新，包括JS基礎(chǔ)，基于面向?qū)ο箝_發(fā)實(shí)戰(zhàn)，前后端交互實(shí)戰(zhàn)，jQuery與BootStrap，以及CSS預(yù)處理器Sass，打造一站式知識長龍服務(wù)，適合有HTML和CSS基礎(chǔ)的同學(xué)學(xué)習(xí)。

2、ES6

ES6的發(fā)布是大前端的里程碑。它的目標(biāo)是使得JavaScript語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級開發(fā)語言 。本視頻主打內(nèi)容最全最新，包括ES6-ES13所有新特性 以及 實(shí)戰(zhàn)應(yīng)用，打造一站式知識長龍服務(wù)，適合有JS基礎(chǔ)的同學(xué)學(xué)習(xí)。

3、Ajax擴(kuò)展

Ajax技術(shù)可以使網(wǎng)頁應(yīng)用能夠快速地將增量更新呈現(xiàn)在用戶界面上，而不需要重載（刷新）整個頁面。

本視頻主打內(nèi)容最全最新，包括Ajax XHR基礎(chǔ)語法、fetch和axios使用、以及 跨域解決方案，打造一站式知識長龍服務(wù)，適合有JS基礎(chǔ)的同學(xué)學(xué)習(xí)。

4、? Promise

Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案回調(diào)函數(shù), 更合理和更強(qiáng)大。ES6 將其寫進(jìn)了語言標(biāo)準(zhǔn)，統(tǒng)一了用法，原生提供了Promise對象 。

本視頻主打內(nèi)容最全最新，包括Promise基礎(chǔ)語法、手寫Promise、async與await 以及 實(shí)戰(zhàn)應(yīng)用，打造一站式知識長龍服務(wù)，適合有JS基礎(chǔ)的同學(xué)學(xué)習(xí)。

5、? Git

前端大牛kerwin老師主講的項(xiàng)目管理工具Git教程上線啦～一看就會，上手不廢的最新版從入門到實(shí)戰(zhàn)全套教程，視頻包括Git常用命令、Git分支管理、團(tuán)隊(duì)以及跨團(tuán)隊(duì)協(xié)作、VSCode集成Git，穩(wěn)穩(wěn)拿捏Git

6、Node.js入門及應(yīng)用

本視頻你將從認(rèn)識Nodejs開始學(xué)習(xí)npm、nrm、yarn；內(nèi)置模塊、路由、express、MongoDB、身份認(rèn)證、koa、MySQL、Socket、Mocha等知識點(diǎn)全覆蓋，學(xué)完本系列視頻可以讓前端程序員插上后端的翅膀，真正成為一名全棧工程師，助力同學(xué)橫向全面發(fā)展。每個大知識點(diǎn)講解后還會通過實(shí)際需求案例驅(qū)動知識點(diǎn)吸收，幽默風(fēng)趣講解驅(qū)動學(xué)習(xí)的積極性，幫助大家迅速成長為Nodejs開發(fā)高手。

7、PC端全棧項(xiàng)目開實(shí)戰(zhàn)

（1）JS原生項(xiàng)目

本PC項(xiàng)目實(shí)戰(zhàn)視頻是基于JS開發(fā)，強(qiáng)化ES6-ES13的項(xiàng)目應(yīng)用，打通前后端數(shù)據(jù)交互，并實(shí)戰(zhàn)應(yīng)用周邊生態(tài)Sass以及Bootstrap, 打造一站式知識長龍服務(wù)，適合有js基礎(chǔ)的同學(xué)學(xué)習(xí)。

（2）Js+Exprese項(xiàng)目

本套使用主要教會大家，如何利用nodejs的一個express框架和js開發(fā)一個blog項(xiàng)目。教會大家使用js做后端，使用js做前端，成為一名全棧工程師。

適合作為一個課程設(shè)計(jì)或者畢業(yè)設(shè)計(jì)，最終我們實(shí)現(xiàn)了一個完整的博客系統(tǒng)，包括用戶的登錄、注冊，圖片上傳，文章的發(fā)布、富文本編輯器、刪除、編輯、修改、列表展示，評論的發(fā)布、刪除、列表展示，。最終實(shí)現(xiàn)了用戶的文章和評論的后臺管理和博客的前臺展示和評論功能。

第三階段：前端高級框架技術(shù)

vue2+vue3→vue實(shí)戰(zhàn)項(xiàng)目 →Pinia→React→React實(shí)戰(zhàn)項(xiàng)目

1、vue2.0+vue3.0 知識點(diǎn)+項(xiàng)目

Vue.js致力于構(gòu)建數(shù)據(jù)驅(qū)動的web應(yīng)用開發(fā)框架，以簡潔化，輕量級，數(shù)據(jù)驅(qū)動，模塊友好等優(yōu)勢深受企業(yè)以及前端開發(fā)者的喜愛，成為前端開發(fā)人員必備的技能。 本課程以項(xiàng)目實(shí)戰(zhàn)為驅(qū)動，以輕松幽默的評書演義，幫你打開通往Vue.js的任督二脈，從vue2輕松過渡到vue3,助力同學(xué)成為一位優(yōu)秀的Vue.js開發(fā)人員。

2、Vue+ElementUI物業(yè)后臺管理系統(tǒng)

本項(xiàng)目是利用Vue3.0?+?Element?Plus?UI技術(shù)開發(fā)后臺管理系統(tǒng)，本視頻你將見證從零開始搭建項(xiàng)目，手把手教你使用vue3.0組件開發(fā)，并用Element?UI庫快速創(chuàng)建項(xiàng)目頁面，使用axios封裝與攔截器進(jìn)行前后端交互，用json-server模擬數(shù)據(jù)后臺創(chuàng)建。在項(xiàng)目中還會講到工具庫的封裝、vue環(huán)境變量的部署、路由的設(shè)置與配置、響應(yīng)式配置等。

3、? Pinia

課程基于vue3+vite+ts來學(xué)習(xí)pinia的使用，并結(jié)合當(dāng)下最流行的聊天解決方案——騰訊IM完成項(xiàng)目實(shí)戰(zhàn)，并深入封裝基于pinia的IM插件。

4、Echarts+Vue3.0數(shù)據(jù)可視化項(xiàng)目構(gòu)建

本項(xiàng)目實(shí)戰(zhàn)課程對Echarts中的各項(xiàng)核心圖標(biāo)技術(shù)，以及周邊技術(shù)都進(jìn)行了詳細(xì)的講解，一套課程讓你精通Echarts技術(shù)棧，串聯(lián)Echarts和vue3.0熱門技術(shù)應(yīng)用，讓大數(shù)據(jù)可視化開發(fā)如絲般順滑！

5、React

React已經(jīng)成為江湖大廠的主流前端開發(fā)框架，本視頻基于最新版React17良心制作。對React開發(fā)核心技術(shù)以及周邊技術(shù)棧進(jìn)行詳細(xì)講解，并進(jìn)一步通過實(shí)際需求案例驅(qū)動知識點(diǎn)吸收，幫助大家迅速成長為React開發(fā)高手。最后還有一個完整的后臺管理系統(tǒng)項(xiàng)目實(shí)戰(zhàn)講解，讓大家即使身不入大廠，也可對企業(yè)內(nèi)部真實(shí)項(xiàng)目組開發(fā)流程與細(xì)節(jié)做到心中有數(shù)。

5、React項(xiàng)目實(shí)戰(zhàn)教程（全球新聞發(fā)布管理系統(tǒng)）

本項(xiàng)目實(shí)戰(zhàn)教程一站式應(yīng)用React全家桶打造企業(yè)級后臺系統(tǒng)，無縫對接各大門派需求，讓你不入江湖，便知江湖風(fēng)雨。 同學(xué)們先去看過上述React開發(fā)基礎(chǔ)視頻，熟悉React 組件開發(fā)，組件通信以及基礎(chǔ)路由開發(fā)再配合食用本實(shí)戰(zhàn)教程效果更好。

6、react項(xiàng)目 UmiJS蛋糕訂購管理平臺

從Umijis 上手、LeanCloud云服務(wù)、商品管理等業(yè)務(wù)邏輯、角色及權(quán)限管理、高德地圖及Echarts這五個方面展開講解Umijs的基本使用,讓同學(xué)們能夠快速上手Umijs框架。采用LeanCloud云服務(wù)作為項(xiàng)目的后端接口，結(jié)合Umijs 框架，serverless云服務(wù)實(shí)現(xiàn)業(yè)務(wù)邏輯交互,角色權(quán)限管理，最后完成蛋糕配送范圍的繪制功能，利用Echarts 實(shí)現(xiàn)數(shù)據(jù)可視化功能

第四階段，混合應(yīng)用開發(fā)技術(shù)

微信公眾號→微信小程序→微信小程序?qū)崙?zhàn)項(xiàng)目→ uni-app→uni-app實(shí)戰(zhàn)項(xiàng)目

所謂混合開發(fā)，就是將HTML5基于瀏覽器的應(yīng)用，嵌入到基于Android和iOS手機(jī)APP里，或者嵌入到基于Node和Chromium的桌面APP里。因?yàn)榧婢吡薟ebApp和NativeApp的雙重優(yōu)點(diǎn)，混合應(yīng)用開發(fā)技術(shù)得到了廣泛的應(yīng)用。

學(xué)會這個部分，就擁有了多端開發(fā)能力，能夠勝任跨平臺跨設(shè)備的架構(gòu)工作。常見的混合開發(fā)如手機(jī)端的微信公眾號、微信小程序、桌面端的Electron技術(shù)和PWA技術(shù)等。

1、微信公眾號開發(fā)

本系列課程從整個微信公眾號體系的介紹開始，進(jìn)一步使用編輯模式來完成一個最基本的公眾號搭建；此外你還將了解到公眾號的開發(fā)模式以及所需的服務(wù)端相關(guān)知識，其中包括Express、MongoDB、Robo3T、mongoose、云服務(wù)器等；還會對微信JS-SDK鑒權(quán)的整個流程進(jìn)行梳理與開發(fā)；使用vue技術(shù)棧結(jié)合vant組件庫，構(gòu)建web應(yīng)用并集成到微信公眾平臺中。

2、微信小程序項(xiàng)目開發(fā)

本系列視頻課程分為兩大部分，微信小程序基礎(chǔ)與項(xiàng)目實(shí)戰(zhàn)開發(fā)。小程序開發(fā)基礎(chǔ)學(xué)習(xí)部分你將從開發(fā)流程學(xué)起，到全局配置、todolist、基礎(chǔ)語法、組件及自定義組件的基礎(chǔ)知識學(xué)習(xí)。實(shí)戰(zhàn)開發(fā)部分的講解則會從項(xiàng)目搭建到借口、封裝、首頁模塊、輪播模塊、搜索模塊、分類模塊、授權(quán)模塊、購物車及我的模塊深度剖析小程序。

3、原生小程序-鋒運(yùn)票務(wù)系統(tǒng) ——基于微信云托管的管理系統(tǒng)

本套《原生小程序-鋒運(yùn)票務(wù)系統(tǒng)》課程是針對有一定的前端基礎(chǔ)的開發(fā)者提供的一個原生小程序案例實(shí)踐課程。課程涵蓋了客戶端及中后臺的業(yè)務(wù)流程，服務(wù)端的部署詳細(xì)的講解微信云托管的項(xiàng)目部署流程。整體項(xiàng)目從企業(yè)實(shí)踐角度出發(fā)，多種常見的業(yè)務(wù)二次封裝的技術(shù)分享，組件的復(fù)用，第三方類庫的合理應(yīng)用。

4、鋒巢直播IM ——基于騰訊云音視頻跨平臺應(yīng)用（全網(wǎng)首發(fā)）

本視頻使用騰訊即時通信IM+直播電商解決方案組件TLS,并涉及眾多騰訊云產(chǎn)品，包括但不限于云直播，云數(shù)據(jù)庫，Serverless，提供了一站式講解，幫助大家迅速整合直播電商功能到自己的業(yè)務(wù)中， 通過幽默風(fēng)趣講解驅(qū)動學(xué)習(xí)的積極性，讓大家不入公司，便知公司項(xiàng)目的全貌。

5、uni-app入門到實(shí)戰(zhàn)項(xiàng)目之《仿網(wǎng)易云音樂》

Uniapp 是基于「 Vue + 微信小程序 」語言體系，開發(fā)人員學(xué)習(xí)成本低上手快，隨著如今 Uniapp 生態(tài)也逐步趨于成熟?；?Uniapp 開發(fā)多端項(xiàng)目，已經(jīng)是很多中小型企業(yè)常用的技術(shù)解決方案。 我們就從 Uniapp 基礎(chǔ)開始，對照企業(yè)級實(shí)踐標(biāo)準(zhǔn)，從零到一打造一個多端（微信小程序 + H5 + 安卓 app + IOS app）的社區(qū)論壇類項(xiàng)目。

6、uni-app蛋糕訂購項(xiàng)目開發(fā)教程

本項(xiàng)目是一個面向部分城市群體的蛋糕定制網(wǎng)站，為指定區(qū)域的用戶提供在線定制、實(shí)時配送，打造線上線下相結(jié)合的個性化蛋糕定制服務(wù)。

第五階段：大前端的架構(gòu)技術(shù)

掌握這個部分，即可擁有大前端架構(gòu)師水平，主要進(jìn)行前端項(xiàng)目架構(gòu)和項(xiàng)目把控。能夠解決網(wǎng)站出現(xiàn)的突發(fā)狀況，能夠改進(jìn)網(wǎng)站性能到極致。擁有大型網(wǎng)站、大量高并發(fā)訪問量等開發(fā)經(jīng)驗(yàn)。

1、webpack5

webpack5課程分為四大部分，分別是webpack基礎(chǔ)應(yīng)用篇，webpack高級應(yīng)用篇，webpack項(xiàng)目實(shí)戰(zhàn)篇以及webpack內(nèi)部原理篇。在本課程中，我們將通過前后呼應(yīng)的demo從0到1學(xué)會webpack5，在項(xiàng)目實(shí)戰(zhàn)中學(xué)以致用并在最后階段去理解其底層的原理，從而做到對webpack5知其然并知其所以然的精熟掌握程度，完成前端工程師的一大步提升。

2、Vite2

Vite 基于原生 ES-Module 推出的前端構(gòu)建工具，Vite 因?yàn)樗目缜岸丝蚣艿哪芰?和極其優(yōu)越的性能，被大家稱為下一代前端構(gòu)建工具，及時的學(xué)習(xí)新技術(shù)是有必要的。本系列視頻你將會學(xué)到Vite環(huán)境的搭建、依賴預(yù)構(gòu)建、模塊熱重載、在Vite中使用vue2\vue3\CSS等其他技術(shù)、服務(wù)器渲染等關(guān)聯(lián)技術(shù)。

3、typescript

本套視頻將從官網(wǎng)的知識點(diǎn)入手，分為基礎(chǔ)篇，高級篇，案例篇及項(xiàng)目篇共4個篇章，結(jié)合案例循序漸進(jìn)帶你入門TypeScript。本視頻還有配套詳細(xì)版的文字筆記，幫助大家從?0?到?1?學(xué)習(xí)TypeScript,讓你能讀懂別人的TS代碼的同時也能編寫自己的TS代碼。

4、從零編寫一個HarmonyOS app

這個項(xiàng)目實(shí)戰(zhàn)案例將手把手教你從0開始編寫華為鴻蒙app，本視頻包含了對鴻蒙系統(tǒng)技術(shù)細(xì)節(jié)、生態(tài)圈全面解析及對鴻蒙系統(tǒng)的技術(shù)架構(gòu)進(jìn)行詳細(xì)講解，最終讓大家開發(fā)初屬于自己的第一個鴻蒙應(yīng)用！真正將學(xué)到的核心技術(shù)點(diǎn)進(jìn)行串聯(lián)使用。

立志欲堅(jiān)不欲銳，成功在久不在速。

每天抽出一定的時間來打卡學(xué)習(xí)課程視頻，堅(jiān)持下去一定會有收獲！

每個前端人在學(xué)習(xí)技術(shù)的階段一定要保證有相應(yīng)的知識點(diǎn)練習(xí)和項(xiàng)目練手且不斷去學(xué)習(xí)新出的技術(shù)才不會被落后，本套前端路線圖也是按照這樣的思路呈現(xiàn)給大家。

我們會不定期更新前端學(xué)習(xí)路線圖以及最新的前端干貨教學(xué)視頻。

為了你的成長不間斷，別忘了一鍵三連！收藏好學(xué)習(xí)路線，時時看、時時學(xué)、時時新。

最后：祝大家都能在前端工程師的成長路上升職加薪。