自学前端，还能找到工作吗？前端老司机告诉你我的零基础跨专业转行之路！！

不知不觉之间转行前端已经有5、6个年头了，从之前的前端小白成长为现在的团队leader，回想起当初在学校的时候利用空闲时间学习前端知识真是个正确的选择。我大学专业学的并不是计算机，而是电子商务，因为本身对电子商务不是很感兴趣，只是专业调剂到了电子商务。 接触前端技术也是一个很偶然的机会，其实根据我转行的经验来说，前端相较于后端对于我们零基础也好，转行也好的小伙伴是最友好的，也是最容易入行的。 

 首先要想学好前端，就必须满足以下几个前提： 

1.  有一台属于自己的电脑 其实不只是前端，只要你是学习任何一门编程语言，都需要大量的练习，所以拥有一台独立的电脑是必不可少的。
2.  一整套系统的课程 虽然你在网上也可已找到很多免费的课程，但是大多质量低劣，目前比较高质量的体系课程讲授机构主要有慕课网、开课吧、黑马程序员、网易云课堂和腾讯课堂。当然一套高质量的视频课程也是价值不菲的，少则五六千多则一两万，你可以加我的微信，我可以给你免费分享一套视频教程，帮助你开启零基础之路。
3. 持之以恒的学习态度 有了前进的方向之后，你必须还要有前进的动力。每天都要抽出至少四至六个小时的时间来学习，边看视频边操作，只有每天这样学练一体坚持下去，你才会成功，学习周期因人而异，一般在六到八个月。 4.加群共同学习，寻找老师指导 一个人的学习之路是很鼓噪乏味的，很难坚持下去。最好认识一些志同道合的人共同学习，这样大家互相鼓励互相扶持才能走的更远。如果群里有行业里面的大牛能时不时的指导你一些学习上的困惑，那就更好了。 

下面是我总结的我学习前端的几个阶段 

阶段一：前端基础入门 HTML5基础语法与标签 

本周是入门前端的第一步，学会IDE插件安装和使用，掌握H5语法和基础标签的应用，学完本周内容可以进行简单的页面结构搭建。 

 学习目的： 

1. 了解前端行业发展 
2. 了解HTML5对于网页的意义 
3. 学习常用标签/属性，进行结构搭建 
4. 掌握无序列表/有序列表/自定义列表 
5. 学习表单标签/属性，能创建常见表单结构 
6. 掌握标签嵌套规则/行内元素/块元素的使用 
7. 学习VSCode开发工具使用，能创建简单网页 

 CSS3基础语法与盒模型 CSS3是网页的"美容师"，开始学习CSS3样式，掌握语法结构、选择器、盒子模型、文本和字体样式设置，能够对网页进行简单的样式开发。 

 学习目的： 

1. 掌握CSS3基本语法和使用 
2. 掌握CSS3各类选择器/样式属性，快速进行样式设置 
3. 学习文本、字体等常见属性 
4. 盒子模型核心知识讲解，深入理解原理 
5. 掌握行内元素和块级元素设置与转换 

阶段二：组件化与移动WebApp开发 

ES6基础入门 ES6是JavaScript新的语法规范，让代码更规范、可读性高、方便操作。本周将开启ES6的学习，这是学习前端必备的一步。掌握ES6相关知识后，能够更便捷的编写代码，提高开发效率。 

 学习目的： 

1.  ES6基本语法与使用 
2. 掌握ES6中变量和常量的使用与区别 
3. 学习可以嵌入表达式的字符串字面量--模板字符串 
4. 掌握箭头函数的特点与应用 
5. 掌握如何自动解析数组或对象中的值 
6. 了解对象字面量更加简洁与灵活的表达方式 
7. 掌握参数默认值的使用 

ES6之Promise与Class类 

Promise 和 Class（类）是ES6中非常重要的知识点。Promise 是异步编程的一种解决方案，比传统的回调函数更合理和更强大。Class（类）来作为对象的模板使用，强化面向对象的使用。 

 学习目的： 

1. 学习如何高效解决回调地域问题 
2. 了解如何运用ES6 Promise进行异步编程 
3. 掌握Class基本语法的使用 
4. 掌握更加清晰与便捷的对象继承方式 
5. 掌握更高级的面向对象编程思想 

ES6之Module模块与Babel编译 

ES6 在语言标准的层面上，实现了模块功能。可以实现将一个大程序拆分成互相依赖的小文件。而babel的使用，完美的解决了ES6的兼容性问题，让ES6有更多可能性，使前后端差异越来越小。 

 学习目的： 

1. 了解企业级的开发形式——模块化的使用 
2. 学习将一个复杂的功能拆分，从而提高复用率 
3. 了解如何更好的维护代码 
4. 掌握babel转换器的使用，解决ES6的兼容问题 
5. 学习如何将Webpack与配合Babel使用，完成更高效的开发 
6. 掌握Webpack项目构建配置

阶段三：小程序与Vue3.x全栈开发 

小程序开发基础 

开始学习爆火的轻应用开发技术——小程序 。通过对小程序知识的学习，能够独立开发企业级小程序，拥有解决主流小程序功能需求的能力。 

 学习目的： 

1. 结合Flex/Template模板，开发小程序首页/活动页/热门排行页 
2. 了解小程序注册流程/注册方式/注册主体 
3. 小程序的全局生命周期和页面级生命周期 
4. 小程序基础语法与常用API 
5. 小程序开发工具的调试办法 
6. 小程序多页面下的开发工作流及目录结构 

Sass基础与Vue.js基础语法 

Vue.js是企业开发另一热门框架，易用、灵活、高效，对于初学者很友好。本周通过对Vue.js基础和Sass布局技术的学习，为后续的全栈项目开发打下基础。 

 学习目的： 

1. 掌握Webpack项目构建配置 
2. 掌握基础语法与常见API 
3. 组件的使用及组件的生命周期 
4. Axios网络请求及路由使用 
5. Vuex的引入、应用场景及项目中的实现 
6. 使用Vue.js技术栈进行项目开发的方式方法 
7. 掌握Sass布局基础 

阶段四：TS&ReactJS开发与工程化构建 

TypeScript与React.js基础语法 

TypeScript和React.js是企业开发热门框架之一 。通过对TypeScript和React.js基础的学习，为后续的旅游项目开发打下基础。 

 学习目的： 

1. 理解JSX 语法与编程思想React UI 渲染原理 
2. 掌握模块化样式加载与事件处理 
3. 了解TS编译流程及配置TS编译器 
4. 掌握副作用钩子使用及其作用 
5. 掌握类组件与高阶组件解决交叉问题 
6. 了解并掌握类组件于函数式组件区别于应用 
7. 掌握组件间数据传递及组件的生命周期 

 阶段五：高级实战项目实践 Vue3+Vite+TS+NestJS突破企业级管理后台开发 

结合最新技术栈，vue3.2+vite4+ant-design-vue组件库完整的管理后台业务，包括：登录、权限、文件上传、管理、解析等，基于NestJS最新后端框架的企业级后端项目开发 

 学习目的： 

1.  基于vue3+vite4+ts+nestjs+微前端等最新技术栈的管理后台全栈项目开发 
2.  完整实现前后端项目开发 3. 借助无界微前端框架改良项目框架，实现架构升级