2024最新前端学习路线指南!
如果你正在寻找一份全面的前端学习路线图,那么这份精心打造的学习大纲恰好符合您的需求。无论您是新手还是经验丰富的开发者,这份路线图都能够帮助您系统地掌握前端开发的关键知识点,并在实践中不断提升自己的技能水平。
这份的学习路线图一共分为多个阶段,每个阶段都有明确的学习目标和清晰的知识点梳理,并用特殊符号对知识点的重要程序进行了区分, 让您可以有条不紊地进行学习。而且,在每个知识点后面,我们都提供了相关免费学习资源链接,让您可以更加深入地了解每个主题,并拓展您的知识面。
最重要的是,这份路线图是按照一种清晰的顺序进行排列的,可以帮助您快速建立起前端知识体系,并逐步成长为一名优秀的前端工程师。如果您想要掌握前端开发的核心技能,并在行业中脱颖而出,那么现在就开始使用这份路线图吧!
“相信通过这份学习路线图可以帮你节约 2W 左右的学费`”
学习前准备
如果你想通过学习编程养活自己, 那么一定要认真阅读以下内容, 如果不是请略过。
- 判断自己是否适合学习编程:
知识星球 | 深度连接铁杆粉丝,运营高品质社群,知识变现的工具
- 判断适合自学还是报班:
知识星球 | 深度连接铁杆粉丝,运营高品质社群,知识变现的工具
- 培训机构内幕揭秘:
知识星球 | 深度连接铁杆粉丝,运营高品质社群,知识变现的工具
- 笔记工具
markdown语法: 程序员记录笔记必备
语法教学: Full example - Editor.md examples
- 笔记记录工具:
Typora: 本地markdown笔记工具 语雀/石墨文档/印象笔记/简书: 在线markdown笔记工具
- 开发工具
WebStorm(付费):
“一款由JetBrains公司开发的专业前端IDE 精装房, 即装即用, 无需额外配置 除了WebStorm以外, JetBrains公司还开发了Java、PHP、Go、G++等主流语言的开发工具, 对于全栈开发者来说, 只要适应了任何一款JetBrains的开发工具, 就相当于适应了所有JetBrains的开发工具”
- 学生免费申请地址:
免费教育许可证 - 社区支持
- 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 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili
- HTML基础②: (共57个视频, 语速较快, 适合二刷)
- P1-P57 从零玩转HTML5+CSS3项目实战上_哔哩哔哩_bilibili
- 面试题: 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 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili
- CSS基础视频②: (共162个视频, 语速较快, 适合二刷)
- P58-P200 从零玩转HTML5+CSS3项目实战上_哔哩哔哩_bilibili
- P1-P20 从零玩转HTML5+CSS3项目实战下_哔哩哔哩_bilibili
- 面试题: 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 黑马程序员前端JavaScript入门到精通全套视频教程,javascript核心进阶ES6语法、API、js高级等基础知识和实战教程_哔哩哔哩_bilibili
- P1-P30 【尚硅谷】3小时Ajax入门到精通_哔哩哔哩_bilibili
JS基础视频②: (共259个视频, 语速较快, 适合二刷)
- P1-P200 从零玩转JavaScript核心+新特性上_哔哩哔哩_bilibili
- P1-P59 从零玩转JavaScript核心+新特性下_哔哩哔哩_bilibili
- P161-P174 从零玩转jQuery+实现原理_哔哩哔哩_bilibili
面试题: 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 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili
- 移动端适配视频②: (共143个视频, 语速较快, 适合二刷)
- P21-P82 从零玩转HTML5+CSS3项目实战下_哔哩哔哩_bilibili
- P1-P67 从零玩转Bootstrap+项目实战_哔哩哔哩_bilibili
- P1-P15 从零玩转原生移动Web开发_哔哩哔哩_bilibili
学习建议:
此阶段建议学习时间为: 5-10天 重点学习伸缩布局和rem, 必须了解媒体查询 其它建议同第一个阶段
CSS预处理器(增强CSS能力)
- √ Sass: 变量、嵌套规则、混合、 注释、插值、运算、可变参数、导入、内置函数、继承、条件判断、循环
- √ Less: 变量、嵌套规则、混合、注释、插值、运算、可变参数、匹配模式、导入、内置函数、继承、条件判断
学习资源:
- 官方文档: Getting started | Less.js Sass: Syntactically Awesome Style Sheets
- 评测视频: (共143个视频, 含3个项目实战)
- P1-P106 从零玩转CSS预处理器+项目实战_哔哩哔哩_bilibili
学习建议:
此阶段为选学, 有时间建议学 此阶段建议学习时间为: 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等框架进行打包
- 优化开发效率和生产环境性能
学习资源:
- 官方文档: 概念 | webpack 中文文档 | webpack中文文档 | webpack中文网
评测视频:
- webpack5视频①: (共88个视频)
- P1-P88 尚硅谷Webpack5入门到原理(面试开发一条龙)_哔哩哔哩_bilibili
- webpack4视频②: (共99个视频)
- P1-P99 从零玩转Webpack+实现原理_哔哩哔哩_bilibili
学习建议:
- 如果选择Vue路线, 可以直接学习下面的Vite
- 先过一遍视频, 项目实战的时候再回来查漏补缺
- 此阶段建议学习时间为: 3-5天
Vite
- 使用Vite创建项目
- 安装Vite
- 初始化Vite项目
- 项目结构介绍
- 启动、打包和部署应用程序
- Vite的开发服务器
- 开发服务器的作用
- Vite的开发服务器原理
- 默认配置项和常用选项
- 处理静态资源和模块
- 如何在Vite中加载CSS、图片等静态资源
- ES模块和CommonJS模块的区别
- Vite如何解决模块化问题
- Vite的插件机制
- 插件的定义和使用方式
- 插件生命周期钩子
- 常用插件介绍
- 如何在Vite中使用Vue.js
- Vue.js与Vite的集成方式
- Vue.js单文件组件的使用
- Vue.js开发过程中的调试技巧
- Vite的构建优化策略
- 构建速度优化的技术原理
- 预编译技术和按需加载的实现
- Vite在开发环境和生产环境下的优化策略
- 调试Vite应用程序
- Vite的调试工具介绍
- 代码调试和性能分析技巧
- Vite应用程序的部署和打包
- 打包应用程序的方式和工具
- Vite应用程序的部署方法和注意事项
学习资源:
- 官方文档: 功能 | Vite 官方中文文档
评测视频:
- Vite视频: (共35个视频)
- P1-P35 Vite世界指南(带你从0到1深入学习 vite)_哔哩哔哩_bilibili
学习建议:
如果选择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 从零玩转Vue全家桶_哔哩哔哩_bilibili
- Vue3基础视频②: (共168个视频)
- P1-P168 尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili
- Vue项目实战视频:
- P1-P63 Vue3入门项目-001-示例与环境说明丨TS丨Vite丨后台课程管理系统_哔哩哔哩_bilibili
- 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可能是更好的选择。 TypeScript:Vue3默认支持TypeScript,如果您使用TypeScript进行开发,学习Vue3可能会更加顺利。 总的来说,学习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实现服务端渲染
学习资源:
- 官方文档: React
- 评测视频:
- React基础视频①: (共133个视频)
- P1-P133 从零玩转React全家桶_哔哩哔哩_bilibili
- React基础视频②: (共178个视频)
- P1-P178 React框架基础入门到原理详解,中高级前端工程师必备react框架_好客租房前端实战项目教程_哔哩哔哩_bilibili
- 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等
- 小程序生命周期
- 组件生命周期
- 页面生命周期
- 应用程序生命周期
- 小程序存储
- 本地数据存储的实现方法
- 缓存的使用方法
- 小程序发布
- 小程序审核流程
- 发布小程序至线上环境
- 小程序云开发
- 云函数、云数据库、云存储、云调用
学习资源:
- 官方文档: 微信开放文档
- 云开发文档: 云开发学习指南 | 云开发CloudBase - Serverless 云原生一体化产品方案
- 评测视频:
- 小程序基础视频①:
- P1-P133 2023从零玩转微信小程序云开发_哔哩哔哩_bilibili
- 小程序基础视频②: (共192个视频)
- P1-P192 黑马程序员前端微信小程序开发教程,微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)_哔哩哔哩_bilibili
- 小程序项目实战视频:
- P1-P31 网易云音乐平台微信小程序【2023最新教程】【毕业设计】【3天搞定毕设】【0基础快速搞定毕设】微信小程序移动端项目实战APP开发_哔哩哔哩_bilibili
- 3大项目 https://t.zsxq.com/0dXoO2Sib by zane
学习建议:
此阶段建议学习时间为: 5-7天(学过Vue或React再学小程序就是切菜) 多看文档, 不会的利用文档的搜索功能解决问题, 报错首先重启小程序开发工具
跨端框架
学Vue路线的学uniapp, 学React路线的学taro(虽然taro也支持vue但是坑比较多). 根据自己的路线把基础过一遍, 选一个自己中意的项目做一下
uniapp:
- 什么是 UniApp
- UniApp 是一个基于 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 的常用 API
- uni.request:网络请求相关 API,如发送 GET、POST 请求等。
- uni.navigateTo 和 uni.redirectTo:页面跳转相关 API。
- uni.showToast 和 uni.showModal:弹出框相关 API。
- uni.getStorage 和 uni.setStorage:本地存储相关 API。
学习资源
- 官方文档: uni-app官网
- 评测视频:
- uniapp基础视频:
- P1-P48 新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握_哔哩哔哩_bilibili
- uniapp项目视频:
- P49-P65 新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握_哔哩哔哩_bilibili
- P1-P85 uniapp开发实战2023全新教程uni-app前端项目实战 uni-app开发小程序/前端vue毕业设计项目【完整版,带支付,有配套的后端教程】_哔哩哔哩_bilibili
- 4大项目 https://t.zsxq.com/0dzTwo7Wl by zane
学习建议:
- 工作中用到再学也不迟
- 一定要明白框架是为了减轻开发者的负担, 而不是增加开发者的负担
- 一定要明白框架的底层还是HTML/CSS/JS这些东西, 所以基础比框架更重要
taro:
- 什么是 Taro
- Taro 是一个开源的多端应用框架,支持使用 React 开发一套代码同时运行在微信小程序、H5、React Native、快应用等平台上。
- Taro 的优势
- 跨平台:Taro 可以将一套代码同时运行在多个平台上,提高开发效率。
- 易于学习:使用 React 进行开发,具有较低的学习门槛。
- 组件丰富:Taro 内置了许多常用组件和 API,可以快速构建应用程序。
- 可扩展性:可以通过插件机制扩展 Taro 的功能。
- Taro 的组成部分
- 页面:Taro 应用程序主要的 UI 界面。
- 组件:Taro 内置了一些常用的组件,如图标、按钮、列表等。
- API:Taro 提供了丰富的 API,如文件系统、网络请求、本地存储等。
- 生命周期:Taro 中组件的生命周期与 React 相似。
- Taro 的开发流程
- 安装 Taro 和相关工具。
- 创建一个 Taro 应用程序。
- 编写页面代码和逻辑处理代码。
- 使用命令行工具进行打包和发布。
- 在各个平台上测试和发布应用程序。
- Taro 的常用 API
- Taro.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 新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握_哔哩哔哩_bilibili
- taro项目视频:
- P1-P192 黑马程序员前端微信小程序开发教程,微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)_哔哩哔哩_bilibili
- 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
- app:应用程序相关 API,如启动应用程序、退出应用程序、获取应用程序路径等。
- BrowserWindow:窗口相关 API,如创建窗口、设置窗口大小、最大化/最小化窗口等。
- ipcMain 和 ipcRenderer:主进程和渲染进程之间通信 API,如发送消息、接收消息等。
- dialog:对话框相关 API,如打开文件选择框、保存文件对话框等。
学习资源:
- 官方文档: 官方指南 | Electron
- 评测视频
- Electron基础视频:
- P1-P24 Electron超详细实战开发教程_哔哩哔哩_bilibili
- Electron项目视频:
- 2大项目 https://t.zsxq.com/0dvUNTou5 by zane
学习建议:
工作中用到再学也不迟
Flutter:
- 什么是 Flutter
- Flutter 是一个开源的移动应用开发框架,由 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 的常用 API
- StatelessWidget 和 StatefulWidget:Widget 类型,用于创建 UI 控件。
- MaterialApp 和 CupertinoApp:应用程序外壳。
- Scaffold:应用程序主要结构和布局。
- Navigator:管理和控制页面路由的 Widget。
- http:网络请求相关 API,如发送 GET、POST 请求等。
学习资源:
- 官方文档: Write your first app | Flutter 文档 | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter
- 评测视频
- flutter基础视频:
- P1-P45 Flutter3.x 系统课程,专为移动端原生开发者量身打造,更新中_哔哩哔哩_bilibili
- flutter项目视频:
- 2大项目 https://t.zsxq.com/0dqwiwAwv by zane
学习建议:
工作中用到再学也不迟
GIT(代码版本控制工具):
- 什么是 Git?
- Git 是一种版本控制系统,用于跟踪代码的变化和历史记录。
- Git 的基本概念
- 仓库(Repository):存储代码的地方。
- 分支(Branch):基于主分支创建的一个独立的开发分支。
- 提交(Commit):将修改提交到仓库中,形成一个新版本。
- 合并(Merge):将两个分支的代码合并为一个分支。
- 拉取(Pull):从远程仓库获取最新代码。
- 推送(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:在仓库中引用其他仓库。
学习资源: 从零玩转Git/Github-版本控制工具_哔哩哔哩_bilibili
学习建议: 找工作前必学
- 其它扩展
- NodeJS: 从零玩转NodeJS+实现原理_哔哩哔哩_bilibili
- Express/KOA/Egg: 从零玩转express+koa+egg_哔哩哔哩_bilibili
- NestJS: Nestjs 全家桶系列_哔哩哔哩_bilibili
- SSR Nuxt.js: Nuxt3-01-了解同构渲染(SSR)丨水哥澎湃_哔哩哔哩_bilibili
- SSR Next.js: 【NextJS】面向前端开发的全栈解决方案_哔哩哔哩_bilibili
- ES6-ES11新特性: 尚硅谷Web前端ES6教程,涵盖ES6-ES11_哔哩哔哩_bilibili
- TypeScript: 从零玩转TypeScript_哔哩哔哩_bilibili
- Pinia: 【web前端】VUE新一代状态管理工具Pinia超详细基础入门_哔哩哔哩_bilibili / 抛弃 Vuex,使用 Pinia_哔哩哔哩_bilibili
- three.js: three.js全网最全最新入门课程(2024年6月更新)【搞定前端前沿技术】_哔哩哔哩_bilibili ,Three.js教程 2024年新版本 配源码和电子书(私信获取) 持续更新中_哔哩哔哩_bilibili
- 不推荐学习内容: React Native、weex、Ionic、Cordova、Phonegap等
写在最后:
无论学习前端开发还是后端开发, 最最最重要的都是打好基础和培养兴趣. 永远要记住任何框架的底层都是基础, 任何框架都是为了提升我的开发效率应运而生的, 而不是增加我们的负担, 所以最难的永远是基础, 最简单的永远是框架