2023年11月21日星期二

前端开发从入门到前端工程师的学习路线

第一阶段:前端入门网页基础

html5+css3→ 页面布局实战(响应式/移动端/pc端页面)

1、 前端入门基础核心必看html+css

这是入门前端最基础的内容。学会后,就能达到初级Web前端工程师水平。熟悉了前端开发的HTML与CSS基础知识,就能够配合UI设计师进行项目布局开发了。

2、 页面布局实战

有了第一步的基础知识,你就可以实战各种页面布局了。学会后,更加夯实初级Web前端工程师水平,能够完成各种PC端与移动端网页布局与样式设计实现了。

第二阶段:前端入门开发内功

javascript(基础+进阶)→ ES6→ Ajax→ Promise→Git→node.jsPC端全栈项目开实战

1、javascript(基础+进阶)

本视频主打内容最全最新,包括JS基础,基于面向对象开发实战,前后端交互实战,jQuery与BootStrap,以及CSS预处理器Sass,打造一站式知识长龙服务,适合有HTML和CSS基础的同学学习。

2、ES6

ES6的发布是大前端的里程碑。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言 。

3、 Ajax

Ajax技术可以使网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面。

学习内容包括Ajax XHR基础语法、fetch和axios使用、以及 跨域解决方案,打造一站式知识长龙服务,适合有JS基础的同学学习。

4、 Promise

Promise 是异步编程的一种解决方案,比传统的解决方案回调函数,更合理和更强大。ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象 。包括Promise基础语法、手写Promise、async与await 以及 实战应用,打造一站式知识长龙服务,适合有JS基础的同学学习。

5、 Git

项目管理工具Git教程上线啦~一看就会,上手不废的最新版从入门到实战全套教程,视频包括Git常用命令、Git分支管理、团队以及跨团队协作、VSCode集成Git,稳稳拿捏Git

6、 node.js

从认识Nodejs开始学习npm、nrm、yarn;内置模块、路由、express、MongoDB、身份认证、koa、MySQL、Socket、Mocha等知识点全覆盖,学完本系列视频可以让前端程序员插上后端的翅膀,真正成为一名全栈工程师,助力同学横向全面发展。

7、 PC端全栈项目开实战

基于JS开发,强化ES6-ES13的项目应用,打通前后端数据交互,并实战应用周边生态Sass以及Bootstrap, 打造一站式知识长龙服务,适合有js基础的同学学习。

第三阶段:前端高级框架技术

vue2+vue3→vue实战项目 →Pinia→React→React实战项目

1、 vue2+vue3

Vue.js致力于构建数据驱动的web应用开发框架,以简洁化,轻量级,数据驱动,模块友好等优势深受企业以及前端开发者的喜爱,成为前端开发人员必备的技能。 本课程以项目实战为驱动,以轻松幽默的评书演义,帮你打开通往Vue.js的任督二脉,从vue2轻松过渡到vue3,助力同学成为一位优秀的Vue.js开发人员。

2、 vue实战项目

Vue+ElementUI物业后台管理系统

本项目是利用Vue3.0 + Element Plus UI技术开发后台管理系统,本视频你将见证从零开始搭建项目,手把手教你使用vue3.0组件开发,并用Element UI库快速创建项目页面,使用axios封装与拦截器进行前后端交互,用json-server模拟数据后台创建。在项目中还会讲到工具库的封装、vue环境变量的部署、路由的设置与配置、响应式配置等。

3、 Pinia

基于vue3+vite+ts来学习pinia的使用,并结合当下最流行的聊天解决方案——腾讯IM完成项目实战,并深入封装基于pinia的IM插件。

4、 React

React已经成为江湖大厂的主流前端开发框架,本视频基于最新版React17良心制作。对React开发核心技术以及周边技术栈进行详细讲解,并进一步通过实际需求案例驱动知识点吸收,帮助大家迅速成长为React开发高手。最后还有一个完整的后台管理系统项目实战讲解,让大家即使身不入大厂,也可对企业内部真实项目组开发流程与细节做到心中有数。

5、 React实战项目

全球新闻发布管理系统

本项目实战教程一站式应用React全家桶打造企业级后台系统,无缝对接各大门派需求,让你不入江湖,便知江湖风雨。 同学们先去看过上述React开发基础视频,熟悉React 组件开发,组件通信以及基础路由开发再配合食用本实战教程效果更好。

第四阶段,混合应用开发技术

微信公众号 →微信小程序→微信小程序实战项目→ uni-app→uni-app实战项目

所谓混合开发,就是将HTML5基于浏览器的应用,嵌入到基于Android和iOS手机APP里,或者嵌入到基于Node和Chromium的桌面APP里。因为兼具了WebApp和NativeApp的双重优点,混合应用开发技术得到了广泛的应用。

学会这个部分,就拥有了多端开发能力,能够胜任跨平台跨设备的架构工作。常见的混合开发如手机端的微信公众号、微信小程序、桌面端的Electron技术和PWA技术等。

1、微信公众号

从整个微信公众号体系的介绍开始,进一步使用编辑模式来完成一个最基本的公众号搭建;此外你还将了解到公众号的开发模式以及所需的服务端相关知识,其中包括Express、MongoDB、Robo3T、mongoose、云服务器等;还会对微信JS-SDK鉴权的整个流程进行梳理与开发;使用vue技术栈结合vant组件库,构建web应用并集成到微信公众平台中。

2、微信小程序

小程序开发基础学习部分你将从开发流程学起,到全局配置、todolist、基础语法、组件及自定义组件的基础知识学习。实战开发部分的讲解则会从项目搭建到借口、封装、首页模块、轮播模块、搜索模块、分类模块、授权模块、购物车及我的模块深度剖析小程序。

3、小程序实战

锋巢直播IM ——基于腾讯云音视频跨平台应用

使用腾讯即时通信IM+直播电商解决方案组件TLS,并涉及众多腾讯云产品,包括但不限于云直播云数据库,Serverless,提供了一站式讲解,帮助大家迅速整合直播电商功能到自己的业务中, 通过幽默风趣讲解驱动学习的积极性,让大家不入公司,便知公司项目的全貌。

4、Uniapp

Uniapp 是基于「 Vue + 微信小程序 」语言体系,开发人员学习成本低上手快,随着如今 Uniapp 生态也逐步趋于成熟。基于 Uniapp 开发多端项目,已经是很多中小型企业常用的技术解决方案。 我们就从 Uniapp 基础开始,对照企业级实践标准,从零到一打造一个多端(微信小程序 + H5 + 安卓 app + IOS app)的社区论坛类项目。

5、Uniapp 实战

第五阶段:大前端的架构技术

webpack5→Vite2→typescript

掌握这个部分,即可拥有大前端架构师 水平,主要进行前端项目架构和项目把控。能够解决网站出现的突发状况,能够改进网站性能到极致。拥有大型网站、大量高并发 访问量等开发经验。

1、webpack5

webpack5课程分为四大部分,分别是webpack基础应用篇,webpack高级应用篇,webpack项目实战篇以及webpack内部原理篇。在本课程中,我们将通过前后呼应的demo从0到1学会webpack5,在项目实战中学以致用并在最后阶段去理解其底层的原理,从而做到对webpack5知其然并知其所以然的精熟掌握程度,完成前端工程师的一大步提升。

2、Vite2

Vite 基于原生 ES-Module 推出的前端构建工具,Vite 因为它的跨前端框架的能力 和极其优越的性能,被大家称为下一代前端构建工具,及时的学习新技术是有必要的。本系列视频你将会学到Vite环境的搭建、依赖预构建、模块热重载、在Vite中使用vue2\vue3\CSS等其他技术、服务器渲染等关联技术。

3、typescript

TypeScript是微软开发的一个开源的编程语言,通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码,可运行在任何浏览器,任何操作系统。TypeScript添加了很多尚未正式发布的ECMAScript新特性(如装饰器)

另外,前端学习线路图会实时更新!学习期间多多跟随视频练习,切勿光看不练

学前端就是为了做项目,学完了做不了项目的,趁早停止。技术的成长都是在项目中提升的,所以一定多接触项目。不要怕遇到问题,因为只有遇到问题解决问题,经验才会积累下来。

留下您的评论