前端学习路线及参考学习资料

前端学习路线及参考学习资料

1. HTML(5) + CSS(3)

—— 参考文档：

菜鸟教程：https://www.runoob.com/

MDN：https://developer.mozilla.org/zh-CN/

—— 参考视频

Web前端HTML5&CSS3初学者零基础入门全套完整版：https://www.bilibili.com/video/BV1XJ411X7Ud

pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式：https://www.bilibili.com/video/BV14J4114768

腾讯课堂 2021权威HTML+CSS零基础入学：https://ke.qq.com/course/231570?taid=2955805083273362

CSS预处理器 less

参考文档：https://less.bootcss.com/#%E6%A6%82%E8%A7%88

尚硅谷 less 教程：https://www.bilibili.com/video/BV1YW411T7vd

---

2. Javascript

—— 参考书籍

《JavaScript 高级程序设计》(第四版)

《JavaScript DOM编程艺术》

—— 参考文档

MDN：https://developer.mozilla.org/zh-CN/

阮一峰 ES6 入门教程：https://es6.ruanyifeng.com/

—— 参考视频

尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)：https://www.bilibili.com/video/BV1YW411T7GX

腾讯课堂Web前端开发JavaScript权威课堂：https://ke.qq.com/course/231577?taid=2841395744442521

—— 客户端请求

Ajax：https://www.runoob.com/ajax/ajax-tutorial.html

Fetch：https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

常用第三方请求封装：

axios：http://www.axios-js.com/zh-cn/docs/index.html#%E4%BB%80%E4%B9%88%E6%98%AF-axios%EF%BC%9F

umi-request：https://github.com/umijs/umi-request/blob/master/README_zh-CN.md

---

3. Bootstrap

核心部分：栅格化布局、响应式系统

—— 参考文档

Bootstrap 官方文档：https://v3.bootcss.com/css/

—— 参考视频

尚硅谷Bootstrap教程(bootstrap框架讲解)：https://www.bilibili.com/video/BV1YW411T7yy

4. Node.js

—— 参考书籍

《深入浅出Node.js》

《Node学习指南》

—— 参考笔记

https://github.com/smallC-L-Y/Demo/blob/notes/nodeJS%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0.md

—— 参考视频

Node.JS-黑马：https://www.bilibili.com/video/BV1Ns411N7HU

node.js实战教程全套完整版(初学者零基础入门)：https://www.bilibili.com/video/BV1bs411E7pD

—— 常用Web服务框架

Express（官方文档）：https://www.expressjs.com.cn/4x/api.html#express

Koa（官方文档）：https://koa.bootcss.com/#introduction

---

5. webpack

—— 参考文档

webpack 官方文档：https://www.webpackjs.com/concepts/

—— 参考视频

10天搞定webpack4（已出V5，具体可参考官方文档）：https://www.bilibili.com/video/BV1a4411e7Bz

尚硅谷前端Webpack5教程（高级进阶篇）：https://www.bilibili.com/video/BV1cv411C74F

---

6. git(版本控制)

—— 参考文档

易百教程：https://www.yiibai.com/git

廖雪峰教程：https://www.liaoxuefeng.com/wiki/896043488029600

—— 参考视频

Git最新教程通俗易懂：https://www.bilibili.com/video/BV1FE411P7B3

---

7. Vue

—— 参考文档

vue 官方文档：https://cn.vuejs.org/v2/guide/

vue-router：https://router.vuejs.org/zh/installation.html

vuex： https://vuex.vuejs.org/zh/

—— 参考视频

2019年最全最新Vue、Vuejs教程，从入门到精通：https://www.bilibili.com/video/BV15741177Eh?p=1

老陈打码 vue 教程：https://www.bilibili.com/video/BV1m741137Q5

—— 常用 ui 库（文档）

Element-UI（适用于中后台）：https://element.eleme.cn/#/zh-CN/component/installation

vant-ui（适用于移动端）：https://vant-contrib.gitee.io/vant-weapp/#/intro

—— 项目实战视频

尚硅谷Vue项目(vue实战谷粒外卖)：https://www.bilibili.com/video/BV1hs411E7cB

---

8. 微信小程序

—— 参考文档

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/

—— 参考视频

Web前端教程零基础玩转微信小程序：https://www.bilibili.com/video/BV1nE41117BQ

—— 常用开发框架

WePY：https://wepyjs.github.io/wepy-docs/2.x/#/base/intro

---

9. React

react 官方文档：https://zh-hans.reactjs.org/docs/hello-world.html

react hooks（函数组件方案）：https://zh-hans.reactjs.org/docs/hooks-intro.html

阮一峰 react hooks教程：https://www.ruanyifeng.com/blog/2019/09/react-hooks.html

redux（状态管理，同 vue的 vuex）：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

redux-saga（redux中间件）：https://chenyitian.gitbooks.io/redux-saga/content/introduction/BeginnerTutorial.html

—— 参考视频

react 视频-黑马：https://www.bilibili.com/video/BV11t411S7iG

前端2021 框架-react基础到实战-(2021年新版基础P122直达)：https://www.bilibili.com/video/BV184411x7F9?p=122

React Hooks免费视频教程：https://www.bilibili.com/video/BV1y4411Q7yH

中后台常用 ui 库（文档）

Antd Design：https://ant.design/index-cn

Element-react(可参考vue版)：https://github.com/ElemeFE/element-react

完整中后台解决方案（ant design pro = ant design + DvaJS + UmiJS）

UmiJS（官方文档）：https://umijs.org/zh-CN/config

DvaJS（官方文档）：https://dvajs.com/guide/

---

9. TypeScript 教程

—— 参考文档

官方文档：https://www.tslang.cn/docs/handbook/basic-types.html

前端进阶v1.1（打不开可直接下载）：http://book.bugstack.cn/#s/6I-ldR3A

---

—— 参考视频

TypeScript从入门到精通视频教程-2020年新版：https://www.bilibili.com/video/BV1qV41167VD

10. React Native

——参考文档

react-native 官方文档：https://reactnative.cn/docs/getting-started

—— 参考视频

2020前端React-Native跨平台APP实战开发教程：https://www.bilibili.com/video/BV1nE411N7js