自学前端一般几年可以精通，找个差不多的工作？

男娘i 2023-01-18 13:22 13阅读 0赞

想要自学前端，那么按照系统的课程标准来看，你大概需要265天就可以学会前端到找工作的程度啦！

完全有时间的情况下，可以自学前端，具体的内容安排我已经帮你做好了，按照下方的内容和时间安排表来做即可，或者你也可以按照自己的进度来学习。

基础入门 14天

主要内容

•自适应布局•BFC•蓝湖•选择器•盒模型•浮动•背景•定位•Flex•转换•Web 字体•动画•标签语法•排版标签•布局标签•多媒体标签•电商网页开发

可解决的现实问题

借助蓝湖工具，参照设计稿，进行 PC 端静态网页的开发。

可掌握的核心能力

•熟练运用 HTML 语法•掌握语义化的本质•合理使用 HTML 标签编写网页的结构•通过浮动、定位、Flex 精细控制网页布局•通过背景、圆角、阴影、渐变等美装饰美化网页内容•结合转换、过渡、动画等高级特性增强用户体验•能够编写大型综合性网页•基于设计稿编写网页•借助蓝湖协同平台进行网页开发•体验真实团队开发流程

移动 / Web 13天

主要内容

•媒体查询•分辨率•视口•媒体查询•rem•屏幕适配•2 倍图•响应式图片•刘海屏适配•添加主屏•禁止复制•Bootstrap•栅格化•团队实战

可解决的现实问题

解决移动设备屏幕所呈现网页的开发，高度还原设计稿，熟悉静态网页的开发流程。

JavaScript / WebAPI / jQuery 30天

主要内容

•流程控制•循环•函数•对象•数组•宿主环境•节点操作•事件流•高阶函数•排序•重绘•回流•预加载•面向对象•原型•class•柯里化•箭头函数•闭包•点九图•ECharts•jQuery•数据可视化项目

可解决的现实问题

网页操作和用户交互是网页开发中不可或缺的组成部分，让网页“动”起来。

可掌握的核心能力

•掌握客户端开发技术，如视觉交互、数据处理、安全、性能•掌握熟练操作 DOM 的能力•熟悉 ES6+ 语法特性•具备面向对象编程的能力•运用 jQuery 提高开发效率，深入面向对象思想•运用 Echarts 完成数据可视化项目的开发

服务端编程 25天

主要内容

•客户端与服务器•封装 Ajax•axios•跨域•防抖节流•HTTP•Node.js•数据库•Express•身份认证•session•JWT•Git•Token 身份认证•资讯后台管理项目

可解决的现实问题

实现客户端与服务端的交互，快速搭建服务器，具备大前端的基本功。

> 在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993  
> 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】  
> 每天更新最新技术文章干货。

可掌握的核心能力

•掌握网页数据交互的 Ajax 技术•掌握 Node.js 中核心模块•具备 Node.js 的编程思维•掌握 npm 的基本使用•根据发包流程将自己开发的库发布到 npm 平台•了解后端数据库的基本使用•能够使用常见的 SQL 语句操作数据库•能够使用 MySQL 模块在项目中操作 MySQL 数据库•掌握 Express 结合 MySQL 编写后端 API 接口•培养出懂后端的前端程序员•运用 Git 对项目进行版本控制•掌握实际开发中那些必知必会的 Git 操作•基于 jQuery + Ajax + 模板引擎 + Git 等技术完成后台管理项目的开发

Vue.js 59天

主要内容

•webpack•Vue 常用 API•Vue-cli•Element•Vuex•vue-router•Vant•MVVM 原理•电商前台管理系统项目•人力资源管理系统项目•黑马头条移动端项目•组件开发

可解决的现实问题

满足前端工程师的岗位要求，重中之重，也是主流框架之一，必会技能。

可掌握的核心能力

•了解组件化开发的思想•了解路由的原理•掌握 Webpack 的基本使用•理解数据驱动视图的思想•掌握 Vue 的使用步骤•掌握 Vue 条件渲染、列表渲染、过滤器、生命周期、计算属性、侦听器等常用 API•掌握 ElementUI 的基本使用•掌握 Vue 中的组件通信技术•掌握 Vue 常用技术栈，如 vue-cli、vue-router、vuex、vue•运用 Vue 的基本语法开发电商后台管理系统•运用 Vue 开发人资管理平台•运用 Vue 开发黑马头条移动端网站•掌握 Vant 的使用•熟悉企业开发流程•熟悉团队开发流程•运用节流和防抖进行性能优化•理解 MVVM 的原理•熟悉 defineProperty 的使用•了解发布订阅设计模式•了解 Proxy 的使用•掌握 npm 平台发包步骤•掌握 Vue 组件封装的技巧

小程序 14天

主要内容

•小程序 API•小程序发布流程•WXS•微信支付•Mobx•uni-app

可解决的现实问题

满足前端工程师的岗位要求，受众广泛，提高就业能力，找工作时的加分项。

可掌握的核心能力

•了解小程序开发的一般流程•熟悉小程基础组件的使用•能够基于 wxml 和 wxss 实现小程序的界面布局•基于模板的数据绑定实现数据的动态渲染•基于 API 实现与服务端的数据通信•掌握小程序中高级 API 的使用。•理解 uni-app 实现跨平台开发的原理机制•以及 uni-app 开发小程序时开发时与原生小程序的差异•熟悉微信支付的接入流程•利用数据缓存实现性能优化

React.js 基础 20天

主要内容

•React 常用 API•JSX•虚拟 DOM•生命周期•组件通信•数据管理流程•Antd•百度地图•高阶组件•组件定制•数据处理•utils•移动端租房项目

可解决的现实问题

深入理解组件化和模块化开发思想，三大主流框架之一，满足企业招聘中的岗位要求。

可掌握的核心能力

•掌握 React 的基本语法•掌握 JSX 的常用语法•掌握 create-react-app 的使用•掌握路由的使用•掌握 React 中组件化开发的能力•了解高阶组件的基本使用•熟悉组件通信的常用方法。•掌握 React 的生命周期•掌握 Redux 的数据管理流程•掌握 Redux 中各组成部分的作用•掌握 React-Redux 的基本使用•了解展示组件和容器组件的区别•了解单向数据流的概念•掌握 React 中 dev-tools 的使用。•掌握 Reac 技术栈进行移动端网站的能力•了解百度地图 SDK 的基本使用•掌握 antd 的基本使用•了解项目中常见业务的开发思路•了解组件化开发思想•了解 CSS in JS 思想

React.js 高级 17天

主要内容

•TypeScript 基础语法•接口、类、继承、构造器•useState•useEffect•useContext•自定义 Hooks•Redux 中间件•AntV•G6•单点登录•小兔鲜儿电商项目

可解决的现实问题

进军大厂必备，结合 TypeScript+Hooks 和函数式编程思想完成项目开发。

可掌握的核心能力

•理解 TypeScript 中的类型系统•理解并能使用 TypeScript 中的泛型•了解 TypeScript 中类型的推断过程•了解 TypeScript 类型的高级用法•理解 Effect Hooks 和 State Hooks 设计思想•理解 Hooks 应用场景•掌握使用 Hooks 封装一些组件•掌握 JavaScript 函数式编程范式•理解主流的数据管理设计思想•掌握 Webpack 的工程化解决方案•掌握 Ant Desgin 的 UI 组件库•掌握基于 RESTful 风格的 API 解决方案•掌握 React-Router-Dom 的路由管理方案•掌握 Redux 的全局状态管理•掌握基于 Redux-Saga 的 Redux 异步处理方案•掌握 create-react-app 脚手架工具•掌握基于 xlsx 的 Excel 表格解析处理方案•掌握基于 AntV/G6 的 Graph 的流程审批功能•掌握基于 React 组件化技术解决方案•掌握结合 Redux 状态管理•掌握用户权限解决方案•掌握 AI 智能推荐方案•掌握秒杀 / 拼团 / 砍价方案•掌握物流追踪方案•掌握数据导出方案•掌握第三方支付方案•掌握即时通讯方案•掌握短信服务方案•掌握流媒体方案•掌握单点登录方案•掌握服务提醒方案

多端跨平台 35天

主要内容

•React-Naitve•Flutter•Dart•PWA•Taro•跨平台电商项目•跨平台交友项目

可解决的现实问题

高级前端工程师必备技能，真正实现一套代码多端运行，减少开发成本，提高开发效率。

可掌握的核心能力

•掌握 RN 原生 App 界面布局•掌握第三方 RN 组件的集成和改造•掌握第三方 Android 原生组件的集成和使用•掌握高德定位自动获取终端经纬度•掌握腾讯逆地址技术•掌握 JWT 交互模式•掌握 Mobx 管理数据•掌握自定义 SVG 绘制•掌握 RN 模态窗口的实现•掌握图文混排布局•掌握 RN 本地相册访问•掌握 RN 本地相机调用•掌握高德地图实现定位功能•掌握 RN 多图片上传•掌握 Flutter 开发环境搭建•掌握 Dart 语言基础•掌握 Flutter 常见的布局方式•理解组件的概念及分类•掌握基础组件、容器类组件、可滚动组件、功能性组件的应用•理解 Taro 实现跨平台开发的原理机制•理解单 JSX 组件与原生小程序组件的对应关系•理解 Taro 开发小程序与原生小程序的差异•掌握原生小程序消息推送方案•掌握原生小程序多线程方案•掌握原生小程序云开发等高级方案•了解 PWA•能够实现通过 PWA 技术强化 H5 网页的原生特性•了解当前 PWA 技术的浏览器兼容情况

工程化 8天

主要内容

•webpack 核心原理•手写脚手架•性能优化•AST•gitflow 工作流

可解决的现实问题

高级前端工程师必备技能，在项目开发中实现自动化、规范化、组件化、模块化。

可掌握的核心能力

•理解 webpack 的作用与原理•熟悉项目的打包过程配置•理解工程化的前端思维•掌握前端工程化的常见工具及工作原理•了解 webpack 性能优化•了解 webpack 中的 tapable•了解 AST 的应用•深入学习 webpack 原理，手写 webpack•掌握 vue-cli 及相关配置•掌握 vue-cli 初始化单页及多页项目•掌握使用 create-react-app 搭建项目•了解 create-react-app 的原理•掌握 angular-cli 搭建项目•了解 angular-cli 的原理•掌握一个基础 cli 的功能实现•掌握提交相关：git rebase/git commit/git reflog/git log•掌握子模块: submodule/subtree•掌握分支管理：git fetch/git checkout/git merge•掌握重置及回退：git reset/git checkout/git rm•掌握多人协同 git 工作流•掌握 git 常见的分支管理命令

前端服务化 30天

主要内容

•Egg•koa•redis•MongoDB•监控平台•版本号分析•埋点方案•PV/UV 统计•性能监控•SSR 原理•Nuxt.js•Next.js

可解决的现实问题

高级前端工程师必备技能，SEO 优化策略之一，网站性能监控与埋点方案。

可掌握的核心能力

•理解 Egg 的作用•运用 Egg 完成项目•理解 Koa 的核心设计思想•掌握 Koa 的中间件编写•理解 redis 核心概念与使用•结合 redis 完成项目•理解 MongoDB 核心概念与使用•理解服务端日志收集系统设计•掌握接入第三方监控平台•掌握对服务端错误预警•实现前端异常上报•实现用户 PV/UV 统计•实现页面加载时间统计•实现用户点击行为统计•实现接口请求日志统计•实现接口请求耗时统计•实现静态资源加载异常统计•实现 JS 页面截图•实现 JS 报错实时监控•实现详情分析和代码定位•实现静态资源加载异常实时监控•实现静态资源加载异常的统计分析•实现接口请求报错实时监控•实现接口请求报错的统计分析•实现用户 PV/UV 实时统计•实现记录回放功能（详细记录用户使用的足迹）•实现 7 日内留存数据分析•了解版本号分析，浏览器分布等信息分析•分析页面加载性能数据•理解 SSR 运行原理•掌握 SSR 环境搭建•掌握使用缓存和 stream 对 SSR 进行性能优化•掌握 Nuxt.js 的应用•掌握 Next.js 的应用