2024最新前端学习路线指南!

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(超文本标记语言)用于定义网页的基本结构(修房子搭建主体框架)

    1. ※ HTML基本语法:HTML标签、属性、元素基本语法。
    1. ※ HTML文档结构:HTML文档的组成部分,包括DOCTYPE声明、html、head、body、meta标签。
    1. ※ 常用HTML标签和属性:分区标签(div)、文字标签(p、h1~h6),图片标签(img)、链接标签(a)、列表标签(ul/ol)、表单标签(form)、表格标签(table)
    1. ※ 表单与输入控件:如何创建表单、文本框、密码框、下拉列表、多选框、单选框等输入控件。
    1. ※ HTML5新特性:HTML5语义化标签、多媒体标签video、audio、canvas、本地存储web storage。
    1. √  其它: 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(层叠样式表)用于控制页面布局方式和装饰网页(对搭建主体框架进行装修)

  1. ※ 引入方式: 行内样式、内部样式、外部样式
  2. ※ 选择器:
  • a 通用选择器、元素选择器、ID 选择器、类选择器、伪类选择器、属性选择器
  • b 派生选择器(后代、子元素、兄弟、交并集)、组合选择器、三大特性(继承、层叠、优先级)
  • c 能够熟练使用它们来定位 HTML 元素。
  1. ※ 属性
  • 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等。
  1. ※ 布局: 浮动、清除浮动、定位(固定、绝对、相对)、弹性布局、网格布局
  2. ※ 响应式设计: 响应式设计的概念和实现方式,并能够根据不同的设备尺寸和屏幕分辨率调整布局和样式, 包括媒体查询、em、rem、vw、vh、百分比、flex布局
  3. Δ  兼容性:了解不同浏览器之间可能出现的兼容性问题,并能够采用合适的技术手段来解决这些问题
  4. Δ  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(轻量级即时编译型的编程语言)用于网页交互

  1. ※ 语法和基本数据类型: 变量声明和赋值、运算符、条件语句、循环语句 值类型(String、Number、Boolean、Null、Undefined、Symbol), 引用类型(Object、Array、Function)
  2. ※ 函数: 自定义函数、匿名函数、箭头函数、递归函数、闭包、作用域(作用域链)
  3. ※ 对象和数组: 对象基本概念、 this、原型(原型链)、继承、深浅拷贝、bind、call、apply 常用对象(Object、Array、Math、Date)的常用方法
  4. ※ BOM和DOM API: 节点&属性增删改查、三大家族(offsetXXX/clientXXX/scrollXXX) 事件流、事件委托、函数节流、函数防抖
  5. ※ 异步编程: Promise & async/await、Generator
  6. Δ  ES6+其它新特性: 解构赋值、对象扩展、函数扩展、数值扩展、正在扩展、运算符扩展、Symbol、Set和Map数据结构等等
  7. Δ  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:

  1. 安装和基础配置
  • webpack和webpack-cli的安装
  • 配置文件的创建和基本选项
  • 命令行参数和模式
  1. 入口、输出和模块解析
  • entry选项和多入口应用程序
  • output选项和打包结果
  • 解析模块的路径和扩展名
  1. 加载器
  • 什么是加载器,以及如何使用它们
  • 处理不同类型的文件(例如样式、图像、字体)
  • 编写自己的加载器
  1. 插件
  • 什么是插件,以及如何使用它们
  • 常见插件(例如HtmlWebpackPlugin、CleanWebpackPlugin)
  • 编写自己的插件
  1. 开发环境
  • webpack-dev-server的使用
  • Source Map和错误处理
  • HMR的实现和优化
  1. 生产环境
  • 打包分离和优化
  • Tree-shaking和代码分割
  • CSS和JS压缩
  1. 构建优化和最佳实践
  • 使用Webpack Dashboard等构建分析工具
  • 异步加载和按需加载
  • 避免常见错误和陷阱
  1. 项目实战
  • 结合Vue、React等框架进行打包
  • 优化开发效率和生产环境性能

学习资源:

  • 官方文档: 概念 | webpack 中文文档 | webpack中文文档 | webpack中文网

评测视频:

  • webpack5视频①: (共88个视频)
  • P1-P88 尚硅谷Webpack5入门到原理(面试开发一条龙)_哔哩哔哩_bilibili
  • webpack4视频②: (共99个视频)
  • P1-P99 从零玩转Webpack+实现原理_哔哩哔哩_bilibili

学习建议:

  • 如果选择Vue路线, 可以直接学习下面的Vite
  • 先过一遍视频, 项目实战的时候再回来查漏补缺
  • 此阶段建议学习时间为: 3-5天

Vite

  1. 使用Vite创建项目
  • 安装Vite
  • 初始化Vite项目
  • 项目结构介绍
  • 启动、打包和部署应用程序
  1. Vite的开发服务器
  • 开发服务器的作用
  • Vite的开发服务器原理
  • 默认配置项和常用选项
  1. 处理静态资源和模块
  • 如何在Vite中加载CSS、图片等静态资源
  • ES模块和CommonJS模块的区别
  • Vite如何解决模块化问题
  1. Vite的插件机制
  • 插件的定义和使用方式
  • 插件生命周期钩子
  • 常用插件介绍
  1. 如何在Vite中使用Vue.js
  • Vue.js与Vite的集成方式
  • Vue.js单文件组件的使用
  • Vue.js开发过程中的调试技巧
  1. Vite的构建优化策略
  • 构建速度优化的技术原理
  • 预编译技术和按需加载的实现
  • Vite在开发环境和生产环境下的优化策略
  1. 调试Vite应用程序
  • Vite的调试工具介绍
  • 代码调试和性能分析技巧
  1. Vite应用程序的部署和打包
  • 打包应用程序的方式和工具
  • Vite应用程序的部署方法和注意事项

学习资源:

  • 官方文档: 功能 | Vite 官方中文文档

评测视频:

  • Vite视频: (共35个视频)
  • P1-P35 Vite世界指南(带你从0到1深入学习 vite)_哔哩哔哩_bilibili

学习建议:

如果选择React路线, 建议学习上面的webpack 先过一遍视频, 项目实战的时候再回来查漏补缺 此阶段建议学习时间为: 1-2天

国内前端必学2大框架

学习之前建议先到招聘网站, 查询你想就业的城市中, 招聘信息上要求Vue比较多还是React比较多, 然后再选择一个学习 对于急于找工作的球友, 前期选择一个进行学习即可, 另一个可以在工作之后再学习 对于时间比较充裕的球友, 重点学完其中一个之后, 可以把另一个过一遍

  • ※ Vue:
  1. 组件
  • 了解什么是Vue组件
  • 理解函数式组件和基于类的组件
  • 熟悉组件的生命周期方法
  1. 模板语法
  • 理解Vue中的模板语法
  • 熟悉指令、插值表达式、事件处理等常用语法
  1. 计算属性和侦听器
  • 理解计算属性和侦听器的区别
  • 熟悉如何使用计算属性和侦听器实现数据绑定和响应式更新
  1. 数据绑定
  • 理解单向数据绑定和双向数据绑定的区别
  • 熟悉v-bind和v-model指令的使用
  1. 生命周期
  • 了解Vue组件的生命周期
  • 熟悉每个生命周期钩子所对应的功能和调用时机
  1. 指令
  • 熟悉Vue中常用的指令,例如v-if、v-for、v-bind、v-on等
  • 了解自定义指令的实现方式
  1. 组件通信
  • 熟悉父组件向子组件传递数据的方式
  • 理解子组件向父组件传递数据的方式
  • 了解非父子组件之间的通信方式
  1. 插件
  • 熟悉如何编写和使用Vue插件,例如Vue Router、Vuex等
  1. Composition API
  • 了解Vue3中引入的Composition API
  • 熟悉如何使用Composition API实现逻辑复用和组合
  1. 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:

  1. JSX语法
  • 了解JSX的基本语法
  • 理解如何在组件中使用JSX
  1. 组件
  • 理解什么是React组件
  • 了解函数组件和类组件
  • 熟悉组件的生命周期方法
  1. Props和State
  • 理解Props和State的区别
  • 熟悉如何在组件中使用Props和State
  • 理解Props和State的更新机制
  1. 事件处理
  • 熟悉React中的事件处理机制
  • 理解如何绑定和解绑事件处理函数
  • 了解合成事件和原生事件的区别
  1. 数据流管理
  • 理解单向数据流的重要性
  • 熟悉Context API和Redux等状态管理工具的使用
  1. 生命周期
  • 了解React组件的生命周期
  • 熟悉每个生命周期方法所对应的功能和调用时机
  1. 高阶组件
  • 理解高阶组件的概念和作用
  • 熟悉如何创建和使用高阶组件
  1. Hooks
  • 了解Hooks的概念和作用
  • 熟悉常用的Hooks,例如useState、useEffect、useContext等
  1. 性能优化
  • 理解React组件更新的机制
  • 熟悉常用的性能优化方法,例如shouldComponentUpdate、PureComponent、memo等
  1. 服务端渲染
  • 了解服务端渲染的优势和使用场景
  • 熟悉如何使用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天
  • 此阶段主要是多做几个项目, 更好的将融合前面所学的知识

小程序开发

  1. 页面与组件
  • WXML语法
  • WXSS样式语言
  • 常用组件使用方法,如text、view、button等
  • 自定义组件的使用方法
  1. 数据绑定和事件处理
  • 数据绑定的实现方法
  • 事件种类和处理方法
  • 页面跳转和传参
  1. API调用和网络请求
  • 常用API介绍,如wx.login、wx.getUserInfo等
  • 网络请求的实现方法,如wx.request、wx.uploadFile等
  1. 小程序生命周期
  • 组件生命周期
  • 页面生命周期
  • 应用程序生命周期
  1. 小程序存储
  • 本地数据存储的实现方法
  • 缓存的使用方法
  1. 小程序发布
  • 小程序审核流程
  • 发布小程序至线上环境
  1. 小程序云开发
  • 云函数、云数据库、云存储、云调用

学习资源:

  • 官方文档: 微信开放文档
  • 云开发文档: 云开发学习指南 | 云开发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:

  1. 什么是 UniApp
  • UniApp 是一个基于 Vue.js 开发的跨平台应用框架。
  • UniApp 可以快速开发多端应用,如微信小程序、H5、Android、iOS 等。
  1. UniApp 的优势
  • 快速开发:UniApp 提供了丰富的组件和 API,可以快速构建应用程序。
  • 跨平台:UniApp 可以将一套代码同时运行在多个平台上,提高开发效率。
  • 体验好:UniApp 支持原生性能和体验,并且可以实现小程序端接口调试。
  • 易于学习:使用 Vue.js 进行开发,具有较低的学习门槛。
  1. UniApp 的组成部分
  • 页面:UniApp 应用程序主要的 UI 界面。
  • 组件:UniApp 提供了一些常用的组件,如图标、按钮、列表等。
  • API:UniApp 提供了丰富的 API,如文件系统、网络请求、本地存储等。
  • 生命周期:UniApp 中组件的生命周期与 Vue.js 相似。
  1. UniApp 的开发流程
  • 安装 UniApp 和相关工具。
  • 创建一个 UniApp 应用程序。
  • 编写页面代码和逻辑处理代码。
  • 使用 HBuilderX 开发工具进行打包和发布。
  • 在各个平台上测试和发布应用程序。
  1. 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:

  1. 什么是 Taro
  • Taro 是一个开源的多端应用框架,支持使用 React 开发一套代码同时运行在微信小程序、H5、React Native、快应用等平台上。
  1. Taro 的优势
  • 跨平台:Taro 可以将一套代码同时运行在多个平台上,提高开发效率。
  • 易于学习:使用 React 进行开发,具有较低的学习门槛。
  • 组件丰富:Taro 内置了许多常用组件和 API,可以快速构建应用程序。
  • 可扩展性:可以通过插件机制扩展 Taro 的功能。
  1. Taro 的组成部分
  • 页面:Taro 应用程序主要的 UI 界面。
  • 组件:Taro 内置了一些常用的组件,如图标、按钮、列表等。
  • API:Taro 提供了丰富的 API,如文件系统、网络请求、本地存储等。
  • 生命周期:Taro 中组件的生命周期与 React 相似。
  1. Taro 的开发流程
  • 安装 Taro 和相关工具。
  • 创建一个 Taro 应用程序。
  • 编写页面代码和逻辑处理代码。
  • 使用命令行工具进行打包和发布。
  • 在各个平台上测试和发布应用程序。
  1. 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:

  1. 什么是 Electron

-Electron 是一个基于 Chromium 和 Node.js 构建的框架,用于开发跨平台桌面应用程序。

  1. Electron 的优势
  • 可以使用 HTML、CSS 和 JavaScript 开发桌面应用程序。
  • 支持 Windows、macOS 和 Linux 等多个操作系统平台。
  • 提供了丰富的 API,可以访问本地文件系统、网络、操作系统等底层功能。
  • 使用 Electron 可以快速搭建界面和实现功能,提高开发效率。
  1. Electron 的组成部分
  • Main Process:主进程,负责创建渲染进程、管理应用程序生命周期和与底层操作系统交互等工作。
  • Renderer Process:渲染进程,负责展示用户界面和处理用户输入事件等工作。
  • IPC:进程间通信,主进程和渲染进程之间通过 IPC 机制进行通信。
  1. Electron 的开发流程
  • 安装 Electron。
  • 创建主进程文件和渲染进程文件,编写代码。
  • 在主进程中创建窗口并加载渲染进程文件。
  • 运行应用程序。
  1. 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:

  1. 什么是 Flutter
  • Flutter 是一个开源的移动应用开发框架,由 Google 开发和维护
  • Flutter 使用 Dart 语言进行开发,具有快速开发、高效率、跨平台等优势。
  1. Flutter 的优势
  • 快速开发:Flutter 具有热重载功能,可以快速预览应用程序的变化。
  • 高效率:Flutter 可以实现一套代码同时运行在 iOS 和 Android 平台上。
  • 自定义 UI:通过 Flutter 的 Widget 树结构,可以方便地自定义 UI 界面。
  • 支持多种平台:Flutter 不仅支持移动端开发,还可以用于 Web、桌面端开发等。
  1. Flutter 的组成部分
  • Widget:Flutter 中最基本的构建单元,可以看作是 UI 构建块。
  • MaterialApp 或 CupertinoApp:Material Design 风格或 iOS 风格的应用程序外壳。
  • Scaffold:应用程序主要结构和布局。
  • Navigator:管理和控制页面路由的 Widget。
  1. Flutter 的开发流程
  • 安装 Flutter 和相关工具。
  • 创建一个 Flutter 应用程序。
  • 编写 UI 布局代码。
  • 添加交互逻辑和数据处理代码。
  • 运行应用程序。
  1. 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(代码版本控制工具):

  1. 什么是 Git?
  • Git 是一种版本控制系统,用于跟踪代码的变化和历史记录。
  1. Git 的基本概念
  • 仓库(Repository):存储代码的地方。
  • 分支(Branch):基于主分支创建的一个独立的开发分支。
  • 提交(Commit):将修改提交到仓库中,形成一个新版本。
  • 合并(Merge):将两个分支的代码合并为一个分支。
  • 拉取(Pull):从远程仓库获取最新代码。
  • 推送(Push):将本地代码推送到远程仓库。
  1. Git 的常用命令
  • git init:初始化一个 Git 仓库。
  • git add:将文件添加到暂存区。
  • git commit:将暂存区的修改提交到仓库。
  • git branch:列出所有的分支。
  • git checkout:切换分支或回退到某个版本。
  • git merge:将不同分支的代码合并。
  • git pull:拉取远程仓库的代码。
  • git push:将本地代码推送到远程仓库。
  • git clone:克隆远程仓库到本地。
  • git status:查看当前工作区状态。
  1. 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等

写在最后:

无论学习前端开发还是后端开发, 最最最重要的都是打好基础和培养兴趣. 永远要记住任何框架的底层都是基础, 任何框架都是为了提升我的开发效率应运而生的, 而不是增加我们的负担, 所以最难的永远是基础, 最简单的永远是框架

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/49598.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

<PLC><HMI><汇川>在汇川HMI画面中,如何为UI设置全局样式?

前言 汇川的HMI软件是使用了Qt来编写的,因此在汇川的HMI程序编写过程,是支持使用qt的样式来自定义部件样式的,即qss格式。 概述 汇川的软件本身提供三个系统的style样式,我们可以直接使用,但是,如果系统提供的样式不符合你的需求,那么你可以对其进行修改,或者自己新建…

修改linux服务器上的mariadb/mysql数据库的密码

文章目录 一、查看数据库的状态二、修改密码 可能我们在最初安装数据库时没有设置密码或者已经设置了但是又想修改另一个密码,可以这样操作来修改我们的密码。 以数据库 mariadb 为例。 一、查看数据库的状态 使用命令 systemctl is-active mariadb 查看当前数据库…

Github 2024-07-27开源项目日报 Top10

根据Github Trendings的统计,今日(2024-07-27统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量非开发语言项目2C++项目2C项目2TypeScript项目1JavaScript项目1Java项目1Python项目1C#项目1免费编程学习平台:freeCodeCamp.org 创建周期:33…

JMeter接口测试:测试中奖概率!

介绍 Apache JMeter 是 Apache 组织基于 Java 开发的压力测试工具,用于对软件做压力测试。JMeter 最初被设计用于 Web 应用测试,但后来扩展到了其他测试领域,可用于测试静态和动态资源,如静态文件、Java 小服务程序、CGI 脚本、J…

Redis 缓存

安装 安装 Redis 下载: Releases tporadowski/redis (github.com) winr ----services.msc-----将redis 设置为手动(只是学习,如果经常用可以设置为自动) 安装 redis-py 库 pip install redis-py Redis 和 StrictRedis redis-py 提供 Redis 和 Str…

Java高频面试题分享

文章目录 1. 策略模式怎么控制策略的选取1.1 追问:如果有100种策略呢?1.2 追问:什么情况下初始化Map 2. 什么是索引?什么时候用索引?2.1 追问:怎么判断系统什么时候用量比较少2.2 追问:如何实时…

C++多态的底层原理

目录 1.虚函数表 (1)虚函数表指针 (2)虚函数表 2.虚函数表的继承--重写(覆盖)的原理 3.观察虚表的方法 (1)内存观察 (2)打印虚表 虚表的地址 函数 传参…

SSM电子商务系统-计算机毕业设计源码68470

基于SSM框架的电子商务系统的设计与实现 摘 要 随着电子商务的迅猛发展和计算机信息技术的全面跃升,网上购物系统由于其迎合了人们诉求和期望而渗入社会生活各个层面和角落。本文设计并实现了一个基于SSM框架的电子商务系统。该系统旨在为用户提供一个舒适且快捷的…

Python基础——第一个Python程序

Python基础——第一个Python程序 一、编写和运行代码的工具1.1 为什么需要工具1.2 默认的交互式环境1.3 文本编辑神器 - Visual Studio Code1.4 专业的集成开发环境 - PyCharm 二、编写第一个Python程序2.1 在PyCharm中编写“Hello, World!”程序2.2 运行“Hello, World!”程序…

Windows 11+Visual Studio 2022 环境OpenCV+CUDA 12.5安装及踩坑笔记

周六日在家捣腾了一下,把过程记录下来。 前置条件 Visual Studio C 生成工具和本机显卡适配的CUDA与CUDA匹配的cuDNNPython 3NumPyOpenCV源代码以及对应版本的OpenCV-contrib模块源码CMake Visual Studio 下载Visual Studio(我本机的是VS2022&#xf…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 智能驾驶(200分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ,一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 👏 感谢大家的订阅➕ 和 喜欢💗 🍿 最新华为OD机试D卷目录,全、新、准,题目覆盖率达 95% 以上,支持题目在线评测,专栏文章质量平均 93 分 最新华为OD机试目录: …

【Golang 面试基础题】每日 5 题(九)

✍个人博客:Pandaconda-CSDN博客 📣专栏地址:http://t.csdnimg.cn/UWz06 📚专栏简介:在这个专栏中,我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话,欢迎点赞👍收藏…

c/c++的内存管理(超详细)

一、c/c的内存分布 这是操作系统中对于内存的划分: 我们重点掌握以下几个区域即可: 1.栈 (调用函数会建立栈帧) 2.堆(动态开辟的空间) 3.数据段(静态区):存放静态变量以及全局变量 4.代码段 (常量区) 先来看看一个题目: int…

蓝牙耳机百元之内怎么选?四款百元精品爆款蓝牙耳机盘点

在蓝牙耳机的海洋中,百元价位仿佛是一片神秘的绿洲,既诱人又充满未知,如何在众多选项中挑选出真正的精品呢?蓝牙耳机百元之内怎么选?这是许多消费者的共同疑问,带着这个疑问,作为蓝牙耳机发烧党…

【Python机器学习】朴素贝叶斯——条件概率

条件概率 假设现在有一个装了7块石头的罐子(3块灰色,4块黑色),如果从中随机取出一块,灰色的可能性就是3/7,黑色的可能性是4/7。我们使用p(gray)来表示取到灰色石头的概率,其概率值可以通过灰色…

1.3 双向链表定义及部分实现

1.定义 单链表的问题:找后继容易, 找前驱难 双向链表( Double Linked List ) :指的是构成链表的每个结点中设立两个指针域: 一个指向其直接前趋的指针域 prior ,一个指向其直接后继的指针域 …

Tent混沌人工蜂群与粒子群混合算法遇到问题,具体问题及解决方案如文。

🏆本文收录于《CSDN问答解惑-专业版》专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收…

谷歌再被OpenAI截胡?训练数学AI拿下IMO银牌,不及SearchGPT放了空响..

昨夜谷歌振臂高呼:我们新的数学AI,能在IMO数学竞赛达到银牌水平! 但就在谷歌发文的几个小时后,OpenAI就偷了谷歌的家: 发布新的搜索方式SearchGPT ,剑指挑战谷歌的搜索引擎。 谷歌双模型并用攻克数学难题…

2. 卷积神经网络无法绕开的神——LeNet

卷积神经网络无法绕开的大神——LeNet 1. 基本架构2. LeNet 53. LeNet 5 代码 1. 基本架构 特征抽取模块可学习的分类器模块 2. LeNet 5 LeNet 5: 5 表示的是5个核心层,2个卷积层,3个全连接层.核心权重层:卷积层、全连接层、循环层&#xff…

LCD 横屏切换为竖屏-I.MX6U嵌入式Linux C应用编程学习笔记基于正点原子阿尔法开发板

LCD 横屏切换为竖屏 横屏显示如何切换为竖屏显示 LCD 屏默认横屏显示 开发板配套的 LCD 屏默认都是横屏显示,如 4.3 寸、7 寸和 10.1 寸的不同分辨率的 RGB LCD 屏 固定坐标体系 (以 800*480 分辨率为例)横屏模式下的固定坐标:…