一步，兩步，三步四步五步，就這樣到達了人生的巔峰~

傳統(tǒng)前端生態(tài)-初級

不使用打包、中間處理工具，手工處理js、css、圖片等資源

掌握以下知識點：

基礎結構：html，h5
基礎樣式：css，css3
基礎語法：js
jq框架：jq，jq系列插件
ui框架：bootstrap3，bootstrap4等
基礎插件：lodash，echarts等
其他：移動端適配，瀏覽器兼容，瀏覽器調試等
恭喜完成新手村修煉任務，正式開啟江湖冒險之旅~

vue 生態(tài)-中級

基礎套件：vue2，vuex，vue-router，axios，vue 靜態(tài)生成器，vue 多頁面，vue history 模式
UI 組件庫：element、iview、vuex、mint-ui、vant、cube-ui等
后端渲染：nuxt.js
語法升級：es6+，less、scss、styls
工具：vue-cli，babel7，webpack4，eslint，vue devtools
其他：調試工具，vuepress
打怪升級，恭喜晉級成功~

React 生態(tài)

基礎套件：react，react-router，jsx，axios，react react history 模式，redux、mobx等
UI 組件庫：antd，antd-mobile
后端渲染：next.js
工具：create-react-app，react-devtools
react-native
持續(xù)打副本刷經(jīng)驗中~

微信生態(tài)-高級

小程序生態(tài)：api，組件，工具，云開發(fā)，mpvue、wepy等
小游戲生態(tài)
微信公眾號生態(tài)：微信授權登錄、支付、分享等常用功能
闖關成功，成功晉級~

Node 生態(tài)-全棧

基礎：node，npm、cnpm、npx、nvm、yarn，pm2，pug，nginx
框架：express，koa2，think.js，egg.js
數(shù)據(jù)庫：mongoodb，mongoose
插件：redis、express-redis-cache、Redis Desktop Manager、moment、nodemailer等
命令行：linux、cmd、mac 命令
工具：express-generator，koa-generator，robo3t，postman，mobaXterm，Sequel Pro
擊敗終極 Boss，成功完成凡間界修煉，開始新世界之旅~

其他

常用工具：編輯器 sublime 研究，ps切圖工具，抓包工具，上傳代碼工具，圖片壓縮工具，截圖工具，取顏色工具，markdown等
git 類：svn，git，github，碼云，sourceTree
埋點：谷歌統(tǒng)計，百度統(tǒng)計，前端錯誤收集等
其他：pwa，parcel，typescript，electron，可視化，工程化，單元測試，前端安全，性能優(yōu)化，數(shù)據(jù)結構+算法，設計模式等

最后

為了幫助大家讓學習變得輕松、高效，給大家免費分享一大批資料，幫助大家在成為全棧工程師，乃至架構師的路上披荊斬棘。在這里給大家推薦一個前端全棧學習交流圈：866109386.歡迎大家進群交流討論，學習交流，共同進步。

當真正開始學習的時候難免不知道從哪入手，導致效率低下影響繼續(xù)學習的信心。

但最重要的是不知道哪些技術需要重點掌握，學習時頻繁踩坑，最終浪費大量時間，所以有有效資源還是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么辦的前端程序員們，祝福大家在往后的工作與面試中一切順利。