前端学习路线

基础三件套 => 巩固基础 => 学习框架 => 多做项目 => 按需学习 => 拓宽视野

1. 前端入门

前端核心：HTML，CSS，JavaScript

1.1. 工具选择

1.1.1. 浏览器

• Chrome：可以用于响应式移动端测试
• Edge：主要用于兼容性处理
• Firefox
• Opera
• Safari

1.1.2. 代码编辑器

• VSCode：免费，可以安装所需插件

  • VSCode安装使用及插件选择

• Sublime Text：跨平台的编辑器

• HBuilder X：可创建uniapp项目，实现多平台开发

1.1.3. 在线编译器

• jsfiddle
• 界面包括了HTML编译器、CSS编译器、JavaScript 编译器和输出界面，有不同的类库可供选择，可以在其中直接编辑并运行自己的前端代码
• CodePen
  • 特点在于界面所见即所得，在编编辑的过程中会不断刷新预览效果
• RunJS
  • 网站有实时预览、 高亮显示、代码格式化等功能，可以将制作好的作品分享给他人，也可以在网站中查看和学习其他内设计师的各种前端作品

1.1.4. 文档笔记

• Typora

  • Markdown语法

• markdown笔记

  • Typora中标题如何自动编号

• 在线笔记

  • 腾讯文档
  • 石墨文档

1.1.5. 思维导图

• Xmind

  • 可以使用安装的软件： https://www.xmind.cn/
  • 也可以在线使用：https://xmind.works/?auth=false

• ProcessOn

  • 可以在线制作流程图等

1.2. 三件套

1.2.1. HTML-网页骨架

在线文档学习：https://developer.mozilla.org/zh-CN/docs/Learn/HTML

学习笔记：

• 认识HTML
• 额外知识补充
• 常见元素
  • h，p，img，a，div，span，iframe
  • 字体实体
• 表元素
  • 列表元素
  • 表格元素
  • 表单元素
• HTML5补充

视频：

• 黑马程序员pink老师前端入门教程

  540集，3-10分钟/集

1.2.2. CSS-网页样式

在线文档学习：https://developer.mozilla.org/zh-CN/docs/Learn/CSS

学习笔记：

• 认识CSS

• 常用属性

• 属性补充

• 选择器

• 三大特性：继承性，层叠性，优先级

• 元素放置技巧

• 盒子模型

• emmet语法

• 网页布局

  应用场景	定位方案
  垂直布局	标准流 (normal flow)
  层叠布局	定位 (position)
  水平布局	浮动 (float)
  弹性布局	flex布局
  网格布局	grid布局

• 前端代码规范

• CSS预处理器-less

• 移动端适配

  • 响应式布局
    • Bootstrap学习笔记
    • 尚硅谷Bootstrap教程(bootstrap框架讲解)

• 综合案例

  • 网易云音乐
  • 王者荣耀
    • 王者荣耀实战1
    • 王者荣耀实战2
    • 王者荣耀实战3
    • js实现
  • 考拉海购移动端

1.2.3. JS-网页互动

在线文档学习：https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript

学习笔记：

• 认识JavaScript
• HTML中的javaScript
• 基础语法
• 函数 函数式编程
• 面向对象 深入面向对象
• 内置类
• BOM DOM 实战案例 事件监听 -> 华为商城案例
• this指向
• 理解浏览器渲染原理
• 理解JS运行原理
• 内存管理和闭包
• ES6 🌟 (模块化)
• ES7 （async/await）
• ES8
• ES9 (Promise，迭代器，生成器)
• ES10
• ES11
• ES12
• 事件循环
• 异常处理
• JSON，Storage，IndexedDB，Cookie
• BOM，DOM
• 防抖节流函数
• 事件总线
• jQuery学习笔记 (过时)
• 异步js - ajax(使用axios)
• ES6+特性

视频：

• pink老师-JavaScript基础语法

  473集

• 尚硅谷JavaScript基础

  140集

• 尚硅谷JavaScript高级教程

  48集

• 尚硅谷前端less教程

  8集

• 尚硅谷3小时Ajax入门到精通

  30集

• 尚硅谷Web前端ES6教程，涵盖ES6-ES11

  68集

• 尚硅谷最经典Node.JS全套完整版教程(快速入门nodejs)

  20集

• 尚硅谷Web前端Promise教程从入门到精通

  46集

• 尚硅谷JS模块化教程

  10集

2. 前端工程化

什么是前端工程化

https://www.zhihu.com/question/433854153/answer/1713597311

使用前端开发框架（Vue / React），并配合脚手架、组件库搭建完整的前端网站，将项目代码提交到代码仓库中，并发布上线

2.1. 研发流程

1. 技术选型
2. 初始化
3. 开发
4. 本地测试
5. 代码提交
6. 编译、打包、构建
7. 部署
8. 集成测试
9. 发布上线
10. 监控运维

2.2. Node.js

描述：一个开源与跨平台的 JavaScript 运行时环境

学习资源：

• Node.js 官网：http://nodejs.cn/learn
• Node.js 入门：https://cnodejs.org/getstart

笔记来源：coderwhy - 深入Node.js技术栈

1. 基础认知
2. 模块化
3. npm
4. 实现脚手架工具
5. Buffer
6. 事件循环和异步IO
7. Stream
8. web服务器
9. MySQL数据库
10. 项目实战

2.3. Vue

笔记来源：coderwhy-vue3+ts

1. 使用Vue3
2. 模板语法
3. webpack搭建Vue环境
4. Vue-CLI脚手架
5. Vite搭建Vue环境
6. 组件化开发
7. 过渡与动画实现
8. Composition_API
9. Vue源码学习
10. VueRouter路由
11. Vuex的状态管理
12. 实现后台管理系统

2.4. 测试

mock.js

2.5. 代码质量

描述：依照规范写出的代码会更加合理

资源：Airbnb 代码规范 https://github.com/BingKui/javascript-zh

代码检查ESLint，提交规范Prettier，提交检查husky

类型校验TypeScript学习笔记

2.6. 构建工具

• 自动化构建

  • Gulp
  • npm script
  • Grunt

• 打包工具

  • webpack学习笔记
  • Vite

2.7. CI/CD

描述：通过在应用开发阶段引入自动化来频繁向客户交付应用

• Jenkins

2.8. 部署

• web服务器

  • nginx

    https://cloud.tencent.com/developer/labs/gallery

  • tomcat

• 容器

  • Docker

    https://vuepress.mirror.docker-practice.com/

  • Kubernetes

3. 前端生态

3.1. 小程序

3.2. 跨端开发框架

• Flutter
• uniapp

4. 实战项目

4.1. 大事件 - nodejs

前端网页

Api说明

后台基于nodejs开发