哈喽，大家好，我是 瓜哥，专注分享 Go 语言知识，一起进入 Go 的大门。
如果你正在寻找一份全面的前端学习路线图，那么这份精心打造的学习大纲恰好符合您的需求。无论您是新手还是经验丰富的开发者，这份路线图都能够帮助您系统地掌握前端开发的关键知识点，并在实践中不断提升自己的技能水平。
这份的学习路线图一共分为多个阶段，每个阶段都有明确的学习目标和清晰的知识点梳理，并用特殊符号对知识点的重要程序进行了区分, 让您可以有条不紊地进行学习。而且，在每个知识点后面，我们都提供了相关免费学习资源链接，让您可以更加深入地了解每个主题，并拓展您的知识面。
最重要的是，这份路线图是按照一种清晰的顺序进行排列的，可以帮助您快速建立起前端知识体系，并逐步成长为一名优秀的前端工程师。如果您想要掌握前端开发的核心技能，并在行业中脱颖而出，那么现在就开始使用这份路线图吧！
“相信通过这份学习路线图可以帮你节约 2W 左右的学费`
”声明：内容首发于扣叮侠知识星球，部分内容仅限知识星球成员查看。
未经允许，请勿搬运，侵权必究
学习前准备
如果你想通过学习编程养活自己, 那么一定要认真阅读以下内容, 如果不是请略过。
判断自己是否适合学习编程:https://articles.zsxq.com/id_524focgr0xbc.html
判断适合自学还是报班:https://articles.zsxq.com/id_jbguj7fhqwwb.html
培训机构内幕揭秘:https://articles.zsxq.com/id_wj8f951swrma.html
笔记工具markdown语法: 程序员记录笔记必备
语法教学: http://editor.md.ipandao.com/examples/full.html
笔记记录工具:Typora: 本地markdown笔记工具 语雀/石墨文档/印象笔记/简书: 在线markdown笔记工具
开发工具WebStorm(付费):
“一款由JetBrains公司开发的专业前端IDE 精装房, 即装即用, 无需额外配置 除了WebStorm以外, JetBrains公司还开发了Java、PHP、Go、G++等主流语言的开发工具, 对于全栈开发者来说, 只要适应了任何一款JetBrains的开发工具, 就相当于适应了所有JetBrains的开发工具
”学生免费申请地址:https://www.jetbrains.com.cn/community/education/#students
VSCode(免费):一款由Microsoft公司开发的跨平台的轻量级IDE 毛坯房, 想想空间大, 需要额外安装对应插件 VSCode拥有丰富的插件生态环境, 可以根据自身的需求量身定制自己的开发环境.
没有好坏之分, 选择适合自己的即可, 两款都是主流.
一图看懂重点学什么
文字详细告诉你怎么学
文字路线图符号说明
※ 必须学
√ 着急找工作可以先不学
Δ 面试前再学也不迟
HTML（超文本标记语言）用于定义网页的基本结构(修房子搭建主体框架)
※ HTML基本语法：HTML标签、属性、元素基本语法。※ HTML文档结构：HTML文档的组成部分，包括DOCTYPE声明、html、head、body、meta标签。※ 常用HTML标签和属性：分区标签(div)、文字标签（p、h1~h6），图片标签（img）、链接标签（a）、列表标签（ul/ol）、表单标签(form)、表格标签(table)※ 表单与输入控件：如何创建表单、文本框、密码框、下拉列表、多选框、单选框等输入控件。※ HTML5新特性：HTML5语义化标签、多媒体标签video、audio、canvas、本地存储web storage。√ 其它: iframe、SVG、地理位置API、Web Workers、Cache Manifest、无障碍等学习资源:
官方文档: https://developer.mozilla.org/zh-CN/docs/Learn/HTML
评测视频:
以下两套视频, 建议按照我标准的顺序来学习, 每套视频看一遍, 看到我标注的章节
HTML基础①: (共60个视频, 语速较慢, 适合新手)
P1-P60 https://www.bilibili.com/video/BV14J4114768
HTML基础②: (共57个视频, 语速较快, 适合二刷)
P1-P57 https://www.bilibili.com/video/BV1yY4y1S7uL
面试题: https://bbs.it666.com/forum_topic/html面试题/
“一定要两套视频都看, 一定要都看, 一定要看, 基础很重要, 很重要, 重要, 要.
”学习建议:
此阶段建议学习时间为: 5-7天
基础不牢, 地动山摇: 基础阶段学习一定不能急于求成
多敲代码, 多动手 : 编程是一门做中学的学科, 光看光听学习效率非常低
养成记笔记的习惯 : 笔记不仅能归纳总结出自己所学的内容, 还能加深学习记忆, 并且还有利于将来复习
养成查文档的习惯 : 查询文档不仅能验证所学的内容是否正确, 还能提升自学能力(新技术大部分都是以文档的形式出现的, 而不是视频教学的方式)
持续学习: 贵在坚持, 而不是跪在坚持. 初学一门技术, 一定要坚持, 否则很容易半途而废.
CSS（层叠样式表）用于控制页面布局方式和装饰网页(对搭建主体框架进行装修)
※ 引入方式: 行内样式、内部样式、外部样式※ 选择器:a 通用选择器、元素选择器、ID 选择器、类选择器、伪类选择器、属性选择器b 派生选择器(后代、子元素、兄弟、交并集)、组合选择器、三大特性(继承、层叠、优先级)c 能够熟练使用它们来定位 HTML 元素。※ 属性a 盒模型相关属性：用于控制元素的尺寸、内边距和外边距等，包括width、height、padding、margin、border等。b 字体与文本相关属性：用于控制字体样式和文本格式，包括font-size、font-family、font-weight、text-align、line-height、vertical-align等。c 背景相关属性：用于控制元素的背景色、图片和平铺方式、精灵图等，包括background-color、background-image、background-repeat、background-position等。d 动画与过渡相关属性：用于创建动态效果和过度效果，包括animation、transition、transform。e 定位与布局相关属性：用于控制元素在页面中的位置和排列方式，包括position、top、right、bottom、left、display、float等。※ 布局: 浮动、清除浮动、定位(固定、绝对、相对)、弹性布局、网格布局※ 响应式设计: 响应式设计的概念和实现方式，并能够根据不同的设备尺寸和屏幕分辨率调整布局和样式, 包括媒体查询、em、rem、vw、vh、百分比、flex布局Δ 兼容性：了解不同浏览器之间可能出现的兼容性问题，并能够采用合适的技术手段来解决这些问题Δ BFC和IFC机制学习资源:
官方文档: https://developer.mozilla.org/zh-CN/docs/Learn/CSS
评测视频:
以下两套视频, 建议按照我标准的顺序来学习, 每套视频看一遍, 看到我标注的章节 CSS基础视频①: (共328个视频, 语速较慢, 适合新手)
P61-P389 https://www.bilibili.com/video/BV14J4114768
CSS基础视频②: (共162个视频, 语速较快, 适合二刷)
P58-P200 https://www.bilibili.com/video/BV1yY4y1S7uL
P1-P20 https://www.bilibili.com/video/BV1hs4y1U7QP
面试题: https://bbs.it666.com/forum_topic/css面试题/
一定要两套视频都看, 一定要都看, 一定要看, 基础很重要, 很重要, 重要, 要
学习建议:
此阶段建议学习时间为: 10-15天 多做几个案例, 多仿几个网站. 其它建议同第一个阶段。
JavaScript（轻量级即时编译型的编程语言）用于网页交互
※ 语法和基本数据类型： 变量声明和赋值、运算符、条件语句、循环语句 值类型(String、Number、Boolean、Null、Undefined、Symbol), 引用类型(Object、Array、Function)※ 函数: 自定义函数、匿名函数、箭头函数、递归函数、闭包、作用域(作用域链)※ 对象和数组： 对象基本概念、 this、原型(原型链)、继承、深浅拷贝、bind、call、apply 常用对象(Object、Array、Math、Date)的常用方法※ BOM和DOM API: 节点&属性增删改查、三大家族(offsetXXX/clientXXX/scrollXXX) 事件流、事件委托、函数节流、函数防抖※ 异步编程: Promise & async/await、GeneratorΔ ES6+其它新特性: 解构赋值、对象扩展、函数扩展、数值扩展、正在扩展、运算符扩展、Symbol、Set和Map数据结构等等Δ TypeScript、JavaScript运行机制学习资源:
官方文档: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript“评测视频: 以下两套视频, 建议按照我标准的顺序来学习, 每套视频看一遍, 看到我标注的章节
”JS基础视频①: (共230个视频, 语速较慢, 适合新手, 这套视频不全, 没有BOM/DOM)
P1-P200 https://www.bilibili.com/video/BV1Y84y1L7Nn
P1-P30 https://www.bilibili.com/video/BV1WC4y1b78y
JS基础视频②: (共259个视频, 语速较快, 适合二刷)
P1-P200 https://www.bilibili.com/video/BV1YT411q7Eg
P1-P59 https://www.bilibili.com/video/BV1Ka4y1u7dd
P161-P174 https://www.bilibili.com/video/BV1Gv4y1W7tf
面试题: https://bbs.it666.com/forum_topic/js面试题/
一定要两套视频都看, 一定要都看, 一定要看, 基础很重要, 很重要, 重要, 要
学习建议:
此阶段建议学习时间为: 15-20天 多做几个案例, 多刷点题. 只要你把上面的三个阶段吃透了, 后面的真的都是切菜 其它建议同第一个阶段
原生移动Web开发(移动端开发必备知识)
※ 响应式设计: 响应式设计的概念和实现方式，并能够根据不同的设备尺寸和屏幕分辨率调整布局和样式, 包括媒体查询、em、rem、vw、vh、百分比、flex布局
学习资源:
官方文档: https://developer.mozilla.org/zh-CN/docs/Learn/CSS评测视频: 以下两套视频, 建议按照我标准的顺序来学习, 每套视频看一遍, 看到我标注的章节
移动端适配视频①: (共148个视频, 语速较慢, 适合新手, 其中Bootstrap部分有时间就学, 没时间可以跳过)
P391-P539 https://www.bilibili.com/video/BV14J4114768
移动端适配视频②: (共143个视频, 语速较快, 适合二刷)
P21-P82 https://www.bilibili.com/video/BV1hs4y1U7QP
P1-P67 https://www.bilibili.com/video/BV1qT411s7zL
P1-P15 https://www.bilibili.com/video/BV1mv4y1V7X9
学习建议:
此阶段建议学习时间为: 5-10天 重点学习伸缩布局和rem, 必须了解媒体查询 其它建议同第一个阶段
CSS预处理器(增强CSS能力)
√ Sass: 变量、嵌套规则、混合、 注释、插值、运算、可变参数、导入、内置函数、继承、条件判断、循环
√ Less: 变量、嵌套规则、混合、注释、插值、运算、可变参数、匹配模式、导入、内置函数、继承、条件判断
学习资源:
官方文档: https://lesscss.org/ https://sass-lang.com/
评测视频: (共143个视频, 含3个项目实战)
P1-P106 https://www.bilibili.com/video/BV1Lv4y1V7je
学习建议:
此阶段为选学, 有时间建议学 此阶段建议学习时间为: 3-5天
构建工具(Build Tools)
Webpack:
安装和基础配置webpack和webpack-cli的安装
配置文件的创建和基本选项
命令行参数和模式
入口、输出和模块解析entry选项和多入口应用程序
output选项和打包结果
解析模块的路径和扩展名
加载器什么是加载器，以及如何使用它们
处理不同类型的文件（例如样式、图像、字体）
编写自己的加载器
插件什么是插件，以及如何使用它们
常见插件（例如HtmlWebpackPlugin、CleanWebpackPlugin）
编写自己的插件
开发环境webpack-dev-server的使用
Source Map和错误处理
HMR的实现和优化
生产环境打包分离和优化
Tree-shaking和代码分割
CSS和JS压缩
构建优化和最佳实践使用Webpack Dashboard等构建分析工具
异步加载和按需加载
避免常见错误和陷阱
项目实战结合Vue、React等框架进行打包
优化开发效率和生产环境性能
学习资源:
官方文档: https://www.webpackjs.com/concepts/评测视频:
webpack5视频①: (共88个视频)
P1-P88 https://www.bilibili.com/video/BV14T4y1z7sw
webpack4视频②: (共99个视频)
P1-P99 https://www.bilibili.com/video/BV1Zv4y1p7f3
学习建议:
如果选择Vue路线, 可以直接学习下面的Vite
先过一遍视频, 项目实战的时候再回来查漏补缺
此阶段建议学习时间为: 3-5天
Vite
使用Vite创建项目安装Vite
初始化Vite项目
项目结构介绍
启动、打包和部署应用程序
Vite的开发服务器开发服务器的作用
Vite的开发服务器原理
默认配置项和常用选项
处理静态资源和模块如何在Vite中加载CSS、图片等静态资源
ES模块和CommonJS模块的区别
Vite如何解决模块化问题
Vite的插件机制插件的定义和使用方式
插件生命周期钩子
常用插件介绍
如何在Vite中使用Vue.jsVue.js与Vite的集成方式
Vue.js单文件组件的使用
Vue.js开发过程中的调试技巧
Vite的构建优化策略构建速度优化的技术原理
预编译技术和按需加载的实现
Vite在开发环境和生产环境下的优化策略
调试Vite应用程序Vite的调试工具介绍
代码调试和性能分析技巧
Vite应用程序的部署和打包打包应用程序的方式和工具
Vite应用程序的部署方法和注意事项
学习资源:
官方文档: https://vitejs.cn/vite3-cn/guide/features.html评测视频:
Vite视频: (共35个视频)
P1-P35 https://www.bilibili.com/video/BV1GN4y1M7P5
学习建议:
如果选择React路线, 建议学习上面的webpack 先过一遍视频, 项目实战的时候再回来查漏补缺 此阶段建议学习时间为: 1-2天
国内前端必学2大框架
学习之前建议先到招聘网站, 查询你想就业的城市中, 招聘信息上要求Vue比较多还是React比较多, 然后再选择一个学习 对于急于找工作的球友, 前期选择一个进行学习即可, 另一个可以在工作之后再学习 对于时间比较充裕的球友, 重点学完其中一个之后, 可以把另一个过一遍
※ Vue:组件了解什么是Vue组件
理解函数式组件和基于类的组件
熟悉组件的生命周期方法
模板语法理解Vue中的模板语法
熟悉指令、插值表达式、事件处理等常用语法
计算属性和侦听器理解计算属性和侦听器的区别
熟悉如何使用计算属性和侦听器实现数据绑定和响应式更新
数据绑定理解单向数据绑定和双向数据绑定的区别
熟悉v-bind和v-model指令的使用
生命周期了解Vue组件的生命周期
熟悉每个生命周期钩子所对应的功能和调用时机
指令熟悉Vue中常用的指令，例如v-if、v-for、v-bind、v-on等
了解自定义指令的实现方式
组件通信熟悉父组件向子组件传递数据的方式
理解子组件向父组件传递数据的方式
了解非父子组件之间的通信方式
插件熟悉如何编写和使用Vue插件，例如Vue Router、Vuex等Composition API了解Vue3中引入的Composition API
熟悉如何使用Composition API实现逻辑复用和组合
Typescript支持了解Vue3对Typescript的支持
熟悉如何使用Typescript编写Vue应用
Pinia: 状态管理
学习资源:
官方文档: Vue.js (vuejs.org) Vue.js – 渐进式 JavaScript 框架 | Vue.js (vuejs.org)
评测视频: Vue2和3并不冲突, 3是在2的基础上做加法, 增加了Composition API和TypeScript支持等内容
Vue2基础视频①: (共82个)
P1-P82 https://www.bilibili.com/video/BV1es4y1J7Pz
Vue3基础视频②: (共168个视频)
P1-P168 https://www.bilibili.com/video/BV1Zy4y1K7SH
Vue项目实战视频:
P1-P63 https://www.bilibili.com/video/BV1mM4y1978b
8大项目 https://t.zsxq.com/0dLgMz6ri by zane
学习建议:
此阶段建议学习时间为: 15-20天 此阶段主要是多做几个项目, 更好的将融合前面所学的知识
“如果您已经熟悉Vue2，学习Vue3可能需要注意以下几个方面： Composition API：Vue3引入了Composition API作为一种新的组件组合方式，它可以帮助开发者更好地组织和管理组件逻辑。与Vue2中的Options API相比，Composition API具有更好的可重用性、代码组织性和类型推断能力。 新特性：Vue3带来了很多新特性，例如Teleport（传送门）、Suspense（异步组件）等等。这些新特性可以帮助您更好地解决实际问题，并提高项目的效率和性能。 性能：Vue3在性能方面做了很多改进，例如重新设计了响应式系统、优化了虚拟DOM算法等等。对于需要处理大量数据或高性能要求的项目，Vue3可能是更好的选择。 时也需要深入理解Vue3的设计原理和哲学，从而更好地运用Vue3进行项目开发。
”※ React:
JSX语法了解JSX的基本语法
理解如何在组件中使用JSX
组件理解什么是React组件
了解函数组件和类组件
熟悉组件的生命周期方法
Props和State理解Props和State的区别
熟悉如何在组件中使用Props和State
理解Props和State的更新机制
事件处理熟悉React中的事件处理机制
理解如何绑定和解绑事件处理函数
了解合成事件和原生事件的区别
数据流管理理解单向数据流的重要性
熟悉Context API和Redux等状态管理工具的使用
生命周期了解React组件的生命周期
熟悉每个生命周期方法所对应的功能和调用时机
高阶组件理解高阶组件的概念和作用
熟悉如何创建和使用高阶组件
Hooks了解Hooks的概念和作用
熟悉常用的Hooks，例如useState、useEffect、useContext等
性能优化理解React组件更新的机制
熟悉常用的性能优化方法，例如shouldComponentUpdate、PureComponent、memo等
服务端渲染了解服务端渲染的优势和使用场景
熟悉如何使用React实现服务端渲染
学习资源:
官方文档: https://react.dev/
评测视频:
React基础视频①: (共133个视频)
P1-P133 https://www.bilibili.com/video/BV1vL411Q7CT
React基础视频②: (共178个视频)
P1-P178 https://www.bilibili.com/video/BV1KS4y1h7jY
React项目实战视频:
9大项目 https://t.zsxq.com/0dHVWEWFk by zane
学习建议:
此阶段建议学习时间为: 15-20天
此阶段主要是多做几个项目, 更好的将融合前面所学的知识
小程序开发
页面与组件WXML语法
WXSS样式语言
常用组件使用方法，如text、view、button等
自定义组件的使用方法
数据绑定和事件处理数据绑定的实现方法
事件种类和处理方法
页面跳转和传参
API调用和网络请求常用API介绍，如wx.login、wx.getUserInfo等
网络请求的实现方法，如wx.request、wx.uploadFile等
小程序生命周期组件生命周期
页面生命周期
应用程序生命周期
小程序存储本地数据存储的实现方法
缓存的使用方法
小程序发布小程序审核流程
发布小程序至线上环境
小程序云开发云函数、云数据库、云存储、云调用学习资源:
官方文档: https://developers.weixin.qq.com/miniprogram/dev/framework/
云开发文档: https://www.cloudbase.net/community/guides.html
评测视频:
小程序基础视频①:
P1-P133 https://www.bilibili.com/video/BV1uV4y197L3
小程序基础视频②: (共192个视频)
P1-P192 https://www.bilibili.com/video/BV1834y1676P
小程序项目实战视频:
P1-P31 https://www.bilibili.com/video/BV1H34y1p7Fd
3大项目 https://t.zsxq.com/0dXoO2Sib by zane
学习建议:
此阶段建议学习时间为: 5-7天(学过Vue或React再学小程序就是切菜) 多看文档, 不会的利用文档的搜索功能解决问题, 报错首先重启小程序开发工具
跨端框架
学Vue路线的学uniapp, 学React路线的学taro(虽然taro也支持vue但是坑比较多). 根据自己的路线把基础过一遍, 选一个自己中意的项目做一下
uniapp:
什么是 UniAppUniApp 是一个基于 Vue.js 开发的跨平台应用框架。
UniApp 可以快速开发多端应用，如微信小程序、H5、Android、iOS 等。
UniApp 的优势快速开发：UniApp 提供了丰富的组件和 API，可以快速构建应用程序。
跨平台：UniApp 可以将一套代码同时运行在多个平台上，提高开发效率。
体验好：UniApp 支持原生性能和体验，并且可以实现小程序端接口调试。
易于学习：使用 Vue.js 进行开发，具有较低的学习门槛。
UniApp 的组成部分页面：UniApp 应用程序主要的 UI 界面。
组件：UniApp 提供了一些常用的组件，如图标、按钮、列表等。
API：UniApp 提供了丰富的 API，如文件系统、网络请求、本地存储等。
生命周期：UniApp 中组件的生命周期与 Vue.js 相似。
UniApp 的开发流程安装 UniApp 和相关工具。
创建一个 UniApp 应用程序。
编写页面代码和逻辑处理代码。
使用 HBuilderX 开发工具进行打包和发布。
在各个平台上测试和发布应用程序。
UniApp 的常用 APIuni.request：网络请求相关 API，如发送 GET、POST 请求等。
uni.navigateTo 和 uni.redirectTo：页面跳转相关 API。
uni.showToast 和 uni.showModal：弹出框相关 API。
uni.getStorage 和 uni.setStorage：本地存储相关 API。
学习资源
官方文档: https://uniapp.dcloud.net.cn
评测视频:
uniapp基础视频:
P1-P48 https://www.bilibili.com/video/BV1mT411K7nW
uniapp项目视频:
P49-P65 https://www.bilibili.com/video/BV1mT411K7nW
P1-P85 https://www.bilibili.com/video/BV1jo4y1q7Yi
4大项目 https://t.zsxq.com/0dzTwo7Wl by zane
学习建议:
工作中用到再学也不迟
一定要明白框架是为了减轻开发者的负担, 而不是增加开发者的负担
一定要明白框架的底层还是HTML/CSS/JS这些东西, 所以基础比框架更重要
taro:
什么是 TaroTaro 是一个开源的多端应用框架，支持使用 React 开发一套代码同时运行在微信小程序、H5、React Native、快应用等平台上。Taro 的优势跨平台：Taro 可以将一套代码同时运行在多个平台上，提高开发效率。
易于学习：使用 React 进行开发，具有较低的学习门槛。
组件丰富：Taro 内置了许多常用组件和 API，可以快速构建应用程序。
可扩展性：可以通过插件机制扩展 Taro 的功能。
Taro 的组成部分页面：Taro 应用程序主要的 UI 界面。
组件：Taro 内置了一些常用的组件，如图标、按钮、列表等。
API：Taro 提供了丰富的 API，如文件系统、网络请求、本地存储等。
生命周期：Taro 中组件的生命周期与 React 相似。
Taro 的开发流程安装 Taro 和相关工具。
创建一个 Taro 应用程序。
编写页面代码和逻辑处理代码。
使用命令行工具进行打包和发布。
在各个平台上测试和发布应用程序。
Taro 的常用 APITaro.request：网络请求相关 API，如发送 GET、POST 请求等。
Taro.navigateTo 和 Taro.redirectTo：页面跳转相关 API。
Taro.showToast 和 Taro.showModal：弹出框相关 API。
Taro.getStorage 和 Taro.setStorage：本地存储相关 API。
学习资源:
官方文档: Taro 介绍 | Taro 文档 (jd.com)
评测视频:
taro基础视频:
P1-P48 https://www.bilibili.com/video/BV1mT411K7nW
taro项目视频:
P1-P192 https://www.bilibili.com/video/BV1834y1676P
3大项目 https://t.zsxq.com/0dp0guNcY by zane
学习建议:
工作中用到再学也不迟
一定要明白框架是为了减轻开发者的负担, 而不是增加开发者的负担
一定要明白框架的底层还是HTML/CSS/JS这些东西, 所以基础比框架更重要
Electron:
什么是 Electron-Electron 是一个基于 Chromium 和 Node.js 构建的框架，用于开发跨平台桌面应用程序。
Electron 的优势可以使用 HTML、CSS 和 JavaScript 开发桌面应用程序。
支持 Windows、macOS 和 Linux 等多个操作系统平台。
提供了丰富的 API，可以访问本地文件系统、网络、操作系统等底层功能。
使用 Electron 可以快速搭建界面和实现功能，提高开发效率。
Electron 的组成部分Main Process：主进程，负责创建渲染进程、管理应用程序生命周期和与底层操作系统交互等工作。
Renderer Process：渲染进程，负责展示用户界面和处理用户输入事件等工作。
IPC：进程间通信，主进程和渲染进程之间通过 IPC 机制进行通信。
Electron 的开发流程安装 Electron。
创建主进程文件和渲染进程文件，编写代码。
在主进程中创建窗口并加载渲染进程文件。
运行应用程序。
Electron 的常用 API序路径等。
BrowserWindow：窗口相关 API，如创建窗口、设置窗口大小、最大化/最小化窗口等。
ipcMain 和 ipcRenderer：主进程和渲染进程之间通信 API，如发送消息、接收消息等。
dialog：对话框相关 API，如打开文件选择框、保存文件对话框等。
学习资源:
官方文档: https://www.electronjs.org/zh/docs/latest/README
评测视频
Electron基础视频:
P1-P24 https://www.bilibili.com/video/BV1QB4y1F722
Electron项目视频:
2大项目 https://t.zsxq.com/0dvUNTou5 by zane
学习建议:
工作中用到再学也不迟
Flutter:
什么是 FlutterFlutter 是一个开源的移动应用开发框架，由 Google 开发和维护
Flutter 使用 Dart 语言进行开发，具有快速开发、高效率、跨平台等优势。
Flutter 的优势快速开发：Flutter 具有热重载功能，可以快速预览应用程序的变化。
高效率：Flutter 可以实现一套代码同时运行在 iOS 和 Android 平台上。
自定义 UI：通过 Flutter 的 Widget 树结构，可以方便地自定义 UI 界面。
支持多种平台：Flutter 不仅支持移动端开发，还可以用于 Web、桌面端开发等。
Flutter 的组成部分Widget：Flutter 中最基本的构建单元，可以看作是 UI 构建块。
MaterialApp 或 CupertinoApp：Material Design 风格或 iOS 风格的应用程序外壳。
Scaffold：应用程序主要结构和布局。
Navigator：管理和控制页面路由的 Widget。
Flutter 的开发流程安装 Flutter 和相关工具。
创建一个 Flutter 应用程序。
编写 UI 布局代码。
添加交互逻辑和数据处理代码。
运行应用程序。
Flutter 的常用 APIStatelessWidget 和 StatefulWidget：Widget 类型，用于创建 UI 控件。
MaterialApp 和 CupertinoApp：应用程序外壳。
Scaffold：应用程序主要结构和布局。
Navigator：管理和控制页面路由的 Widget。
http：网络请求相关 API，如发送 GET、POST 请求等。
学习资源:
官方文档: https://docs.flutter.dev/get-started/codelab https://flutter.cn/docs
评测视频
flutter基础视频:
P1-P45 https://www.bilibili.com/video/BV1fd4y1E79f
flutter项目视频:
2大项目 https://t.zsxq.com/0dqwiwAwv by zane
学习建议:
工作中用到再学也不迟
GIT(代码版本控制工具):
什么是 Git？Git 是一种版本控制系统，用于跟踪代码的变化和历史记录。Git 的基本概念仓库（Repository）：存储代码的地方。
分支（Branch）：基于主分支创建的一个独立的开发分支。
提交（Commit）：将修改提交到仓库中，形成一个新版本。
合并（Merge）：将两个分支的代码合并为一个分支。
推送（Push）：将本地代码推送到远程仓库。
Git 的常用命令git init：初始化一个 Git 仓库。
git add：将文件添加到暂存区。
git commit：将暂存区的修改提交到仓库。
git branch：列出所有的分支。
git checkout：切换分支或回退到某个版本。
git merge：将不同分支的代码合并。
git pull：拉取远程仓库的代码。
git push：将本地代码推送到远程仓库。
git clone：克隆远程仓库到本地。
git status：查看当前工作区状态。
Git 的高级操作Git Flow 工作流：一种基于 Git 的工作流程，适用于团队协作开发。
Cherry-pick：选择一个或多个提交将其应用到当前分支。
Rebase：将一个分支的历史记录合并到另一个分支中。
Submodule：在仓库中引用其他仓库。
学习资源: https://www.bilibili.com/video/BV1Ka4y1u7ML
学习建议: 找工作前必学
其它扩展
NodeJS: https://www.bilibili.com/video/BV1xL411U7Nh
Express/KOA/Egg: https://www.bilibili.com/video/BV1wX4y167uE
NestJS: https://www.bilibili.com/video/BV1NG41187Bs
SSR Nuxt.js: https://www.bilibili.com/video/BV1pP4y127PF
SSR Next.js: https://www.bilibili.com/video/BV1q54y1w7k3
ES6-ES11新特性: https://www.bilibili.com/video/BV1uK411H7on/
TypeScript: https://www.bilibili.com/video/BV1fh411g7eG
Pinia: https://www.bilibili.com/video/BV1rM411n7Uz / https://www.bilibili.com/video/BV11Y411b7nb
three.js: https://www.bilibili.com/video/BV1Gg411X7FY ，https://www.bilibili.com/video/BV14r4y1G7h4
不推荐学习内容: React Native、weex、Ionic、Cordova、Phonegap等
写在最后:
无论学习前端开发还是后端开发, 最最最重要的都是打好基础和培养兴趣. 永远要记住任何框架的底层都是基础, 任何框架都是为了提升我的开发效率应运而生的, 而不是增加我们的负担, 所以最难的永远是基础, 最简单的永远是框架.
