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

news2024/11/13 8:05:21

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.coloradmin.cn/o/1957474.html

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

相关文章

实验2-3-7 阶梯电价

//实验2-3-7 阶梯电价 /*为了提倡居民节约用电,某省电力公司执行“阶梯电价”, 安装一户一表的居民用户电价分为两个“阶梯”: 月用电量50千瓦时(含50千瓦时)以内的,电价为0.53元/千瓦时; 超过5…

java实现加水印功能

1-Word加水印 实现原理&#xff1a; ● 通过页眉页脚生成文字水印或图片水印&#xff0c;然后设置页眉页脚的高度以及旋转角度来设置水印。 源代码&#xff1a; 1、引入pom依赖 <dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml…

家具购物小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;家具分类管理&#xff0c;家具新品管理&#xff0c;订单管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;家具新品&#xff0c;家具公告&#xff0…

给配置环境变量的小白们的一个tips

告诉什么也不懂的计算机小白包括我&#xff0c;配置环境变量的时候&#xff0c;系统变量配置好之后&#xff0c;path变量一定要去users里加&#xff0c;不要在系统变量里加&#xff0c;不然查版本号的时候你就会像我一样在命令行里傻傻的 你加到系统变量的path后&#xff0c;在…

Linux网络——深入理解传入层协议TCP

目录 一、前导知识 1.1 TCP协议段格式 1.2 TCP全双工本质 二、三次握手 2.1 标记位 2.2 三次握手 2.3 捎带应答 2.4 标记位 RST 三、四次挥手 3.1 标记位 FIN 四、确认应答(ACK)机制 五、超时重传机制 六 TCP 流量控制 6.1 16位窗口大小 6.2 标记位 PSH 6.3 标记…

昇思25天学习打卡营第10天|xiaoyushao

从今天开始做一些实践应用&#xff0c;今天分享的是FCN图像语义分割。 全卷积网络&#xff08;Fully Convolutional Networks&#xff0c;FCN&#xff09;是UC Berkeley的Jonathan Long等人于2015年在Fully Convolutional Networks for Semantic Segmentation一文中提出的用于图…

值得买科技与MiniMax达成官方合作伙伴关系,共建融合生态

7月29日&#xff0c;值得买科技与大模型公司MiniMax宣布达成官方合作伙伴关系。 MiniMax旗下大模型产品海螺AI现已接入值得买“消费大模型增强工具集”&#xff0c;基于海螺AI比价策略&#xff0c;用户可通过海螺AI“悬浮球”功能实现快速比价及跳转购买。 此次合作也标志着值…

2023河南萌新联赛第(二)场 南阳理工学院

A. 国际旅行Ⅰ 题目&#xff1a; 思路&#xff1a; 因为题意上每个国家可以相互到达&#xff0c;所以只需要排序&#xff0c;输出第k小的值就可以了。 AC代码&#xff1a; #include<bits/stdc.h> #define int long long #define IOS ios::sync_with_stdio(0);cin.tie…

springboot短视频推荐系统-计算机毕业设计源码21503

摘 要 本论文基于协同过滤算法&#xff0c;旨在设计并实现一种基于SpringBoot框架的短视频推荐系统。该系统主要分为平台用户和管理员两类角色&#xff0c;用户可以注册、登录、浏览短视频内容&#xff0c;并根据个人兴趣收藏喜爱的视频。管理员则可以管理系统数据、用户和内容…

3.1.数据增广

数据增广 ​ 以图片为例&#xff0c;在不同的灯光&#xff0c;色温&#xff0c;以及灯光反射的影响下&#xff0c;对识别可能会造成很大影响。这时候我们希望样本有更多的多样性&#xff0c;则可以在语言里面加入各种不同的背景噪音&#xff0c;或者改变图片的颜色和形状 1.常…

【2024蓝桥杯/C++/B组/进制】

题目 代码 #include <bits/stdc.h> using namespace std;// 定义一个字符串 str&#xff0c;其内容为 "8100178706957568" string str "8100178706957568";// 函数 check 用于检查传入的字符串是否全部由数字组成 bool check(const string& st…

Java(二十七)---二叉搜索树以及Map和Set

文章目录 前言1.二叉搜索树1.1.概念1.2.操作--- 插入1.3.操作---搜索1.4.操作---删除1.6.性能分析1.7 和 java 类集的关系 2.搜索2.1.概念和场景2.2.模型 3.Map的使用3.1.关于Map的说明3.2.Map.Entry<K,V>的说明3.3.Map中常用的方法3.4.TreeMap的使用案例 4.Set的使用4.1…

探索 Milvus 存储系统:如何评估和优化 Milvus 存储性能

欢迎来到探索 Milvus 系列。Milvus 是一款支持水平扩展和具备出色性能的开源向量数据库。Milvus 的核心是其强大的存储系统&#xff0c;是数据持久化和存储的关键基础。该系统包括几个关键组成部分&#xff1a;元数据存储&#xff08;meta storage&#xff09;、消息存储&#…

Vs2022+QT+Opencv 一些需要注意的地方

要在vs2022创建QT项目&#xff0c;先要安装一个插件Qt Visual Studio Tools&#xff0c;根据个人经验选择LEGACY Qt Visual Studio Tools好一些&#xff0c;看以下内容之前建议先在vs2022中配置好opencv&#xff0c;配置方式建议以属性表的形式保存在硬盘上。 设置QT路径 打开v…

数学建模--差值算法

目录 插值方法的种类 应用实例 编程实现 算法实现 拉格朗日插值算法 ​编辑 多项式差值算法 样条插值 牛顿插值算法 插值算法在数据预测中的最新应用和案例研究是什么&#xff1f; 如何比较不同插值方法&#xff08;如线性插值、多项式插值&#xff09;在实际工程问…

bjtu数据库课程设计--基于Spring Boot框架的门店点餐系统

一、安装与配置 1 安装与配置 下载IntelliJ IDEA&#xff0c;需要下载安装jdk1.8.0_152&#xff0c;安装tomcat-9.0.88&#xff0c;安装MySQL8.0数据库。安装成功后打开IntelliJ IDEA&#xff0c;使用 Spring Boot 2.6.13框架&#xff0c;服务器URL窗口使用start.aliyun.com&a…

AI副业玩法:开启你的智能赚钱之路

在这个数码时代&#xff0c;人工智能&#xff08;AI&#xff09;已经不仅仅是科技巨头的专利&#xff0c;它逐渐渗透到我们生活的方方面面。如今&#xff0c;越来越多的人开始利用AI技术进行副业尝试&#xff0c;既拓宽了收入来源&#xff0c;也提升了自我技能。那么&#xff0…

【前端 07】JavaScript中的数组对象

JavaScript中的数组对象 在JavaScript中&#xff0c;数组&#xff08;Array&#xff09;对象是一种非常基础且强大的数据结构&#xff0c;用于在单个变量中存储多个值。这些值可以是任何数据类型&#xff0c;包括数字、字符串、甚至是其他数组&#xff08;多维数组&#xff09…

实验2-4-2 求N分之一序列前N项和**注意小细节

//实验2-4-2 求N分之一序列前N项和//计算序列 1 1/2 1/3 ... 的前N项之和。#include<stdio.h> #include<math.h> int main(){int N;double sum0.0;scanf("%d",&N);for(int a1;a<N;a)sum(1.0/a);//这里必须是1.0 不可以是1&#xff01;&#x…

【管理咨询宝藏150】MBB咨询顾问的结构化PPT训练课程

【管理咨询宝藏150】MBB咨询顾问的结构化PPT训练课程 【格式】PDF版本 【关键词】MBB、麦肯锡、罗兰贝格、咨询顾问 【核心观点】 - 在项目的开始阶段你着手发展有效的金字塔式的演示文稿—我们的重点在最后两个步骤&#xff1b;我们用金字塔结构&#xff1a;通过把核心的信息…