大前端学习路线图（附视频及源码）

叁歲伎倆 2022-11-27 03:17 58阅读 0赞

## 万般皆下品，唯有学习高； ##

这是一篇非常详细的且经典的前端学习路线图

下面会按顺序分模块给大家展示学习内容，让大家学习的时候有成就感，学习更平滑；

## 第一阶段：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全套）][2019Web_HTML_CSS]

**配套资源：**

[https://pan.baidu.com/s/1Pd932pPEKYMNCW2n4pUOZw][https_pan.baidu.com_s_1Pd932pPEKYMNCW2n4pUOZw]

## 第三阶段JavaScript与jQuery开发 ##

这一阶段是重中之重，这一阶段主要是页面行为交互，实现网站中常见特效，如：轮播图、选项卡、拖拽。并能配合UI和后端进行项目开发；

**一、JavaScript开发**

1. DOM、BOM、事件

2. 面向对象、算法、动画

3. Ajax、前后端通信原理

4. 闭包、设计模式、错误处理

5. 常见特效制作及整站交互实现

**配套学习视频：**

[JavaScript基础入门教程全集（强烈推荐）][JavaScript]

**配套资源**：

[https://pan.baidu.com/s/1vPYD82mB\_AkBVB2q2Mk7qw 提取码：dbch][https_pan.baidu.com_s_1vPYD82mB_AkBVB2q2Mk7qw _dbch]

## 二、jQuery开发 ##

1. jQuery核心思想及特性

2. jQuery常见方法及使用

3. jquery插件制作与jqueryUI组件使用

4. 4、编写常见特效及jQuery源码分析

**配套学习视频：**

[jQuery入门教程全集（看过最详细的）][jQuery]

**配套资源：**

[https://pan.baidu.com/s/1R2n67Io55MgRKptsAO\_7Lg][https_pan.baidu.com_s_1R2n67Io55MgRKptsAO_7Lg]

## 三、项目：纯原生前端技术打造仿小米电商网站视频 ##

**配套学习视频：**

[纯原生前端技术打造仿小米电商网站视频][Link 1]

**配套资料：**

[https://pan.baidu.com/s/1FopIvpNgUJZEfZ61jkrAWA 提取码：ykpg][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全套教程全开源（强烈推荐）][Vue]

**配套资源：**

[https://pan.baidu.com/s/1ykVWPDQjKhQgkibHZ3cdhQ 提取码：1zvr][https_pan.baidu.com_s_1ykVWPDQjKhQgkibHZ3cdhQ _1zvr]

## **二、Vue项目：** ##

**配套学习视频：**

[Vue实战项目之喵喵电影][Vue 1]

配套资源：Vue实战项目之喵喵电影[https://pan.baidu.com/s/1HwOnFtgY\_j7KzcCCPWbaQw][https_pan.baidu.com_s_1HwOnFtgY_j7KzcCCPWbaQw]

三、Vue常见问题讲解：

**配套学习视频：**

[Vue.js常见问题讲解][Vue.js]

配套资源：

[https://pan.baidu.com/s/1kBLiKL2lwS9d08TCc0WIkw 提取码：3la7][https_pan.baidu.com_s_1kBLiKL2lwS9d08TCc0WIkw _3la7]

二、React框架开发

1、 React基础教程

a) JSX语法与Hooks新特性

b) React路由

c) Redux状态管理

d) Next服务端渲染

e) 基于React的UI组件库

**配套学习视频：**

[React入门到大神][React]

**配套资源：**

[https://pan.baidu.com/s/18j0EtU7pLlcd1jMlDDSNBg 提取码：vvur][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入门到大神][Node.JS]

**配套资源：**

[https://pan.baidu.com/s/13FCVc68ZnFdMhHkZtN1f7g 提取码：hp2l][https_pan.baidu.com_s_13FCVc68ZnFdMhHkZtN1f7g _hp2l]

## 三、NodeJS+Express+MongoDB实战项目 ##

**配套学习视频：**

[NodeJS+Express+MongoDB实战项目][NodeJS_Express_MongoDB]

**配套资源：**

[https://pan.baidu.com/s/1YfcorhIR9etRJ\_vxsvy0ig][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小程序开发框架

**配套学习视频：**

[轻松玩转微信小程序开发][Link 2]

**配套资料**

[https://pan.baidu.com/s/17IabhW0SWHnFhiZ3mDCduw][https_pan.baidu.com_s_17IabhW0SWHnFhiZ3mDCduw]

## 三、小程序项目 ##

**配套视频教程：**

[小程序全栈开发之喵喵交友][Link 3]

**配套资料：**

[https://pan.baidu.com/s/1ggShoLPpbryYc8oKbL1rCQ 提取码：dlib][https_pan.baidu.com_s_1ggShoLPpbryYc8oKbL1rCQ _dlib]

## 四、Mpvue小程序框架 ##

**配套视频教程：**

[小程序框架Mpvue入门教程][Mpvue]

**配套资料：**

小程序框架Mpvue入门教程（全开源） [https://pan.baidu.com/s/1g\_l9NEXISlgQq2DRSvTCsQ][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全套视频][Flutter]

**配套资源：**

[https://pan.baidu.com/s/1Zvj164kzdUy3KrUvNU0s-A][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构建跨平台桌面应用程序][Electron-HTML_CSS_JS]

**配套资源：**

[https://pan.baidu.com/s/1zS8Gr\_lnKn8DNlQVB1JcHA 提取码：5wt8][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教程][Webpack4.0]

**配套资料：**

[https://pan.baidu.com/s/1V9kX7e8-FCjVrmUDzL9A-Q 提取码：etxn][https_pan.baidu.com_s_1V9kX7e8-FCjVrmUDzL9A-Q _etxn]

## 二、安全及性能优化 ##

1. 前端攻击demo详解

2. 前端监控异常

3. 测试前端代码线上的实际性能

4. SEO：搜索引擎优化

5. Chrome中的高级调试功能

[2019Web_HTML_CSS]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/av52670599
[https_pan.baidu.com_s_1Pd932pPEKYMNCW2n4pUOZw]: https://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1Pd932pPEKYMNCW2n4pUOZw
[JavaScript]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/av82478570
[https_pan.baidu.com_s_1vPYD82mB_AkBVB2q2Mk7qw _dbch]: https://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1vPYD82mB_AkBVB2q2Mk7qw
[jQuery]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/av82474447
[https_pan.baidu.com_s_1R2n67Io55MgRKptsAO_7Lg]: https://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1R2n67Io55MgRKptsAO_7Lg
[Link 1]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/av93644505
[https_pan.baidu.com_s_1FopIvpNgUJZEfZ61jkrAWA _ykpg]: https://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1FopIvpNgUJZEfZ61jkrAWA
[Vue]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/av81318072
[https_pan.baidu.com_s_1ykVWPDQjKhQgkibHZ3cdhQ _1zvr]: https://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1ykVWPDQjKhQgkibHZ3cdhQ
[Vue 1]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/av47535390
[https_pan.baidu.com_s_1HwOnFtgY_j7KzcCCPWbaQw]: https://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1HwOnFtgY_j7KzcCCPWbaQw
[Vue.js]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/av50575805
[https_pan.baidu.com_s_1kBLiKL2lwS9d08TCc0WIkw _3la7]: https://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1kBLiKL2lwS9d08TCc0WIkw
[React]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/av93927490
[https_pan.baidu.com_s_18j0EtU7pLlcd1jMlDDSNBg _vvur]: https://link.zhihu.com/?target=https%3A//pan.baidu.com/s/18j0EtU7pLlcd1jMlDDSNBg
[Node.JS]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/av93926147
[https_pan.baidu.com_s_13FCVc68ZnFdMhHkZtN1f7g _hp2l]: https://link.zhihu.com/?target=https%3A//pan.baidu.com/s/13FCVc68ZnFdMhHkZtN1f7g
[NodeJS_Express_MongoDB]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/av76294539
[https_pan.baidu.com_s_1YfcorhIR9etRJ_vxsvy0ig]: https://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1YfcorhIR9etRJ_vxsvy0ig
[Link 2]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/av62816038
[https_pan.baidu.com_s_17IabhW0SWHnFhiZ3mDCduw]: https://link.zhihu.com/?target=https%3A//pan.baidu.com/s/17IabhW0SWHnFhiZ3mDCduw
[Link 3]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/av72028587
[https_pan.baidu.com_s_1ggShoLPpbryYc8oKbL1rCQ _dlib]: https://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1ggShoLPpbryYc8oKbL1rCQ
[Mpvue]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/av82474329
[https_pan.baidu.com_s_1g_l9NEXISlgQq2DRSvTCsQ]: https://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1g_l9NEXISlgQq2DRSvTCsQ
[Flutter]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/av59761431
[https_pan.baidu.com_s_1Zvj164kzdUy3KrUvNU0s-A]: https://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1Zvj164kzdUy3KrUvNU0s-A
[Electron-HTML_CSS_JS]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/av72028068
[https_pan.baidu.com_s_1zS8Gr_lnKn8DNlQVB1JcHA _5wt8]: https://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1zS8Gr_lnKn8DNlQVB1JcHA
[Webpack4.0]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/av51579321
[https_pan.baidu.com_s_1V9kX7e8-FCjVrmUDzL9A-Q _etxn]: https://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1V9kX7e8-FCjVrmUDzL9A-Q