干货满满前端工程师主要工作内容是什么？前端，前端工程师主要工作内容是什么意思，

日期：2023/07/19 14:10作者：张虹伦人气：

导读：另外，很多宝子反映不知道去哪里找资料，因此我特地花了1个月的时间，总结了前端开发的最全教程，学习路…...

$作为一个十六的老前端儿，干过无数项目；今天用这篇字长文，给你一次解释清楚。作为一个十六的老前端儿，干过无数项目；今天用这篇10000字长文，给你一次解释清楚。$ {\color{red}{作为一个十六的老前端儿，干过无数项目；今天用这篇10000字长文，给你一次解释清楚。}}

另外，很多宝子反映不知道去哪里找资料，因此我特地花了1个月的时间，总结了前端开发的最全教程，学习路线，各章节知识点以及项目实战，希望能帮你解决资料缺乏的情况。文末

一、什么是前端开发工程师？

前端工程师主要负责设计、开发和维护网站的前端部分，包括用户界面和交互体验。

这通常包括使用 HTML、CSS 和 JavaScript 等技术来实现网站的布局和样式，以及创建动态、交互式的网页元素。

前端工程师还需要确保网站在各种浏览器和设备上都能正常运行，并且能够根据用户需求不断优化和改进网站。

为了让你更加全面且深刻地理解前端开发这个概念，接下来我会从前端的发展历史、前端工程师的职责和工作、前端的发展方向这几大方面，进一步介绍说明。

想要了解前端从业者的工作职责，需要从一个完整网站应用产生流程入手，一个网站应用从无到有的过程大致如下：

1）产品经理与甲方反复沟通交流，逐步确定产品需求完成设计草图；

2）产品经理根据需求和草图进行分析，提交 PRD（需求文档），并与开发人员协商软件功能；

3）若PRD（需求文档）协商通过，后端开发团队进行可行性分析并完善方案；在一定的准备过后，进入后端开发，并给出开发文档；

4）产品经理根据协商通过后的PRD，制作原型和设计文档，并交付设计团队；

5）UI/IxD等不同职责的设计师，根据设计文档和原型产出高保真原型；

6）前端参与视觉和交互的评审，进而完成原型图切图；

7）前端根据后端/接口文档，进行页面构建和开发，并且不断针对数据和功能相关内容与后端沟通和交流；

8）前后端功能实现，数据流通之后，测试人员进行功能测试，并记录 bug（漏洞），形成文档并交付 bug 产生方，前后端修补各自的 bug ，并重复测试；

9）测试完毕之后的产品，可以交付给甲方。

作为前端开发者，阅读优秀书籍和文献是我们不断学习和成长的关键。

阅读是最有效的个人成长方式之一，它可以帮助我们深入了解前端开发的各种技术和概念，并在工作中不断迭代、改进和创新。因此，建议前端开发者注重阅读，并挑选一些有深度、有价值的书籍不断提升自己的技术水平和能力。

以下这份包含103本前端经典书籍的书单（其中32本是豆瓣评分8分+），是我花费一个月时间整理的：

书单我已经帮大家打包好了，点击下方链接直接获取：

2023年前端全套学习资料（视频+配套资料+源码）

免费领取103本前端开发电子书（含代码）

从以上流程中我们可以看到：Web 应用开发过程中，后端先行，设计师出稿后，前端才能进行开发。

前端确实在造物，他们是做了一个又一个的 Web 应用，只不过设计是别人的，数据也是别人的，自己的自主权被压缩了太多，这导致前端工作看上去像是仅仅将别人的设计实现。在整个团队中，可能功劳不多，但是苦劳肯定不少！

不过，这并不代表前端是鸡肋。从上一章前端发展历史来看，前端岗位独立出来，恰恰是因为它变得越来越重要！

在整个项目团队中，前端除了写好自己的代码之外，更重要的是团队的润滑剂。一个小型团队一般就五个人：产品经理、设计师、前端、后端和测试。前端不仅要参与需求文档的开发，视觉交互的评审，还要与后端交流，与测试沟通；实际上，整个应用开发过程中，前端处于交流的中心位置。

而在整个应用中，前端就像一道桥梁，沟通用户和软件背后的服务，不仅实现了设计，还赋予整个产品活力。如果网页应用只是单纯地将内容呈现给用户，那跟图文小说没什么区别，比较死板。如果只是单纯从用户身上获取信息，就跟问卷调查没什么区别，缺乏反馈感。

后端需要理解代码逻辑，产品经理需要理解人的逻辑，而前端需要同时理解两者，写的是代码，产出的却不是程序，而是产品！

实际上，没有一成不变的工作，也没有一成不变的职责。就像我在课程开始时提到的一样，前端的概念现在很“大”，并且一直在变化；提升自己，保持精进，跟紧潮流，才是你真正的职责！

以上是从团队角色角度解说前端职责；接下来，我们聚焦前端工程师本身，在更小的粒度下，看看前端工程师做了些什么。

二、前端开发工程师需要具备什么能力？

作为一名优秀的前端开发工程师，需要具备以下能力：

精通 HTML、CSS、JavaScript 等 Web 开发技术，能够编写高质量、高性能的前端代码。具备良好的视觉设计能力，能够根据用户需求和交互原型设计出合理、优美的网页布局和样式。能够关注用户体验，确保网站在各种浏览器和设备上都能正常运行，并且能够根据用户需求进行优化和改进。具备良好的沟通能力和团队合作能力，能够与设计师、后端开发工程师和产品经理等相关人员协作，完成项目开发。具备扎实的专业知识和较强的学习能力，能够不断学习新技术和新方法，保持技术领先。

总之，作为一名优秀的前端开发工程师，需要具备扎实的技术功底和良好的视觉设计能力，以及良好的沟通能力和团队合作能力。这些能力都是前端开发工程师在工作中不可或缺的。

当然上面这些东西看起来其实是比较正式书面的，接下来我就通过照片网站的数据来详细跟大家分析一下前端开发工程师需要具备什么能力？

其实大部分小伙伴学习前端的目的就是为了能找一份不错的工作，所以，我们要学习或者要掌握的技能一定是企业需要的。所以我们要学习的内容就来源于市场的需求，那我们怎么看企业的需求呢？当然是招聘网站了。

ps：这个大家也可以自己去看，这个方法也可以用到很多其他的领域，叫做“以终为始”。

我们可以从前端开发招聘的需求中看出，企业招人的要求，需要具备哪些技能和能力。我们就可以针对性的去学习。当然不是盲目的去学习，而是需要系统的学习，这样知识体系才是完整的，综合能力才能过硬。

以下截图大型招聘网站对于前端开发工程师岗位的要求：

数据来源：BOSS直聘

通过如上截图可以看出来，其实要从事前端开发相关的工作，要求其实还是挺多的，而且每家公司的业务不同所要求的具备的能力也是不同的。

虽然招聘需求不尽相同，但是还是有很多共同点，那有没有一张图可以系统展示前端学习内容，来满足市场需求呢？

$当然有了当然有了$ {\color{red}{当然有了}}

我们要做的就是要帮助大家在最短的时间内，找到最高效的学习方式和学习资源。所以通过把大量公司的招聘需求，调研、统计、分析、处理、汇总，最终形成了一个前端的知识体系，在根据大家0基础学习的特点，由易到难，由点到面的设计出了一个系统的、高效的学习路线图。

这张前端学习路线图，列举了前端目前入门所需要掌握的技术。

三、如何成为前端开发工程师？

想要成为一个名前端工程师根据上面为大家提供的高效前端学习路线进行学习就可以，

大致可以分为4个阶段：

1、基础入门： HTML5+CSS3+实战项目 → 移动web

2、JavaScript阶段： JavaScript基础 → JavaScript核心Web APIs → 数据交互 & 异步编程Ajax\Git

3、VUE开发：框架前置课Nodejs&es6 → Vue2+Vue3全套

4、React + 微信小程序： React → TypeScript → 微信小程序

5、项目实战 -工程化 -服务化等

6、简历 & 面试指导

2023年前端全套学习资料（视频+配套资料+源码）

第一阶段基础入门 HTML5+CSS3+实战项目 → 移动web

学前导读：为零基础学员量身定制，教你搭建PC端和移动端静态页面，让你从小白升级成网页“化妆师”，轻松掌握 HTML5 和 CSS3 相关知识。

1.1、Web前端零基础入门HTML5+CSS3+前端项目

课程中和课程尾配备两个实战项目，项目一类型是企业站，可以让同学们快速的将基础知识点进行反复练习；项目二类型是电商站，可以让同学们掌握更复杂的网页效果的开发流程和布局标准。

本教程严格按照专业的开发流程：专业的测量工具，做到100%还原设计稿。

学习目标

借助PxCook工具，参照设计稿，能综合使用HTML+CSS技术完成企业级小兔鲜儿电商项目PC端首页开发。

主讲内容

1. HTMLHTML 负责网页的结构层，是网页开发的基础，从简单的网页骨架搭建入手，使用常见的 HTML 标签丰富网页结构。

主讲内容

2. CSS在 HTML 搭建的网页结构基础上，通过 CSS选择器精准选择标签，使用外观、盒模型相关属性完成网页全部内容，利用浮动、定位等布局技巧精准控制网页布局，结合背景、圆角、阴影等装饰属性进一步美化网页效果，达到能够编写企业级大型综合网页。

知识点：选择器 | 外观 | 文字 | 背景 | 标准流 | 三大特性 | 盒模型 | 伪元素 | 浮动 | 伪类 | 定位 | 圆角 | 阴影 | 透明 | 过渡

主讲内容

3. 企业级小兔鲜儿电商项目首页制作借助PxCook工具，基于设计稿编写网页，确保网页的高度还原，通过综合运用 HTML + CSS 技术，按照实际项目开发流程，归纳开发技巧，提升综合实战水平，完成企业级小兔鲜儿电商项目PC端首页开发。

1.2、移动web开发实战

本课程采用2+5模式, 前两天承接HTML+CSS, 使用字体图标、平面转换、动画等，丰富网页效果和呈现方式；后5天完成移动端和多端适配效果。

课程采用闭环方式设计，每天课程都有完整的案例或项目，让学生学以致用。

学习目标

1. 使用CSS高级特效，丰富网页元素的呈现方式和效果| 2. 使用rem或vw、vh实现网页元素宽高随着视口变化等比缩放的效果| 3. 使用bootstrap框架布局响应式网页

主讲内容

1. CSS高级特效使用css高级特效丰富网页元素的呈现方式和效果。

知识点：字体图标｜2D转换｜3D转换｜动画

主讲内容

2. 移动适配首先介绍Flex布局模型,实现移动端网页的基本布局;再讲解两种移动端网页适配不同分辨率的解决方案,并使用不同的解决方案制作网页元素宽高随着视口的变化而等比缩放的效果。

知识点：rem ｜ vw/vh｜Flex布局模型｜Less基础语法｜视口｜分辨率｜二倍图｜移动适配｜媒体查询

主讲内容

3. 响应式学习响应式的原理,并使用bootstrap框架完成响应式网页的布局。

知识点：媒体查询｜ bootstrap框架｜栅格系统｜组件｜响应式网页布局

第二阶段技术进阶 JavaScript阶段

学前导读：让网页“动”起来，带你学会前端工程师核心语言——JavaScript，实现网页数据交互与动画效果，并实现与后端数据的联通。

2.1、JavaScript深入浅出

学完本课程你将掌握JavaScript基础从变量的定义与使用、数据类型及相互转换、运算符、流程控制语句、三元运算符、数组、函数、构造函数、内置对象以及对象等基础必备技能。学习客户端

开发技术，能够根据产品需求完成开发任务，如视觉交互、数据处理、安全、性能等，熟练掌握 DOM 操作的方法，能够分析视觉交互需求，结合 CSS 规则设计合理的 DOM 结构，完成开发任务。

学习目标

1. 掌握JavaScript基础语法，培养编程逻辑思维

2. 掌握DOM和BOM对象的常用属性和方法，能够完成网页常见的交互效果

3. 能够使用 axios 实现 Ajax 操作，为后续项目课做好技术铺垫

4. 能够运用 Git 管理前端项目，并且使用 Git 分支进行多人协同开发

5. 能够使用 Promise 与 async/await 高效的实现异步操作

主讲内容

1. JavaScript基础学习JavaScript基础语法规则。

2. WebAPI学习DOM和BOM对象的属性和方法,以完成网页常见的交互效果。

3. JavaScript高级深入理解 ECMAScript 的知识体系及工作机制，熟悉 ES6+ 新的语法特性，注重抽象思维的培养，具备面向对象编程的的能力。

知识点：构造函数 | 单体对象 | 面向对象 | 原型 | 解构 | 剩余 | 展开 | 箭头函数 | Object | Array | 严格模式 | 闭包 | 继承 | 防抖 | 节流 | 异常处理 | 深浅拷贝

4. Ajax利用 axios 发起 Ajax 请求，实现前后端的数据交互。并讲解 HTTP 请求的过程以及 Ajax 的底层原理。深入学习 JS 异步的底层原理，能够使用 Promise 处理异步操作，并使用 async/await 简化异步操作。

5. Git能够创建 Git 仓库管理前端项目。基于 Git 分支进行多人协同开发，并且能够把本地的 Git 仓库同步到远程码云或 Github 仓库中。

知识点：安装和配置 Git | Git 本地操作的常用命令 | .gitignore 忽略文件 | Git 分支与常用命令 | 远程仓库的使用

读是最有效的个人成长方式之一，它可以帮助我们深入了解前端开发的各种技术和概念，并在工作中不断迭代、改进和创新。因此，建议前端开发者注重阅读，并挑选一些有深度、有价值的书籍不断提升自己的技术水平和能力。

以下这份包含103本前端经典书籍的书单（其中32本是豆瓣评分8分+），是我花费一个月时间整理的：

书单我已经帮大家打包好了，点击下方链接直接获取：

免费领取103本前端开发电子书（含代码）

第三阶段 VUE开发

3.1、VUE框架开发

学前导读：掌握多行业解决方案，项目开发拿来即用，帮你搞定前端工程师必备热门框架Vue.js。

历经 5 年的反复打磨与锤炼，黑马程序员重磅推出全套最新的 Vue2 + Vue3 基础课程。共计 500 多集的免费视频，助您轻松掌握前端圈最火的 Vue 框架！

学习目标

通过 Vue2 和 Vue3 的基础学习，掌握企业开发中常见业务功能实现；通过深入 Vue 技术栈

学习 vue-router vuex vant element-ui 等主流技术，掌握企业级项目开发方式，如移动端H5项目实与PC端管理项目；通过 Vue3 结合 TypeScript 的技术学习，掌握大型企业级项目开发技巧。

主讲内容

1. 框架前置课掌握模块化思想，npm包管理，webpack基础，初探工程化开发。

2. Vue核心技术运用Vue2.0全家桶核心内容实现开发中常见的功能，如购物车，经典列表、TodoMVC等。运用 Vant 开发移动端，运用element-ui开发PC后台管理系统。

3. Vue3.0高级掌握Vue3新特性、Vite、组合API、Pinia 等。

4. TypeScript掌握TypeScript基础语法，并且在Vue3项目中熟练运用TypeScript。

第四阶段 React&小程序开发

4.1、React框架

学前导读：React帮你解锁中高级前端工程师能力地图，多端项目让你满足90%+企业需求。

React 是时下最流行的前端框架之一，是很多大厂的首选前端开发框架！历经数月精心研发，内容包括：React 脚手架、JSX、函数组件、类组件、受控组件、组件通讯、Context、组件生命周期、高阶组等等技术。

学习目标

通过React+class组件+Hooks+Redux+TypeScript的学习，实现企业开发中的经典案例，如B站论、购物车、放大镜、点餐系统等业务功能。

主讲内容

1. React 核心技术基于 React 脚手架（create-react-app）搭建React项目，

掌握JSX语法搭建页面结构，使用函数组件实现组件化开发，掌握组件通讯在项目开发中的使用。

2. Hooks 深入+路由掌握 useEffect Hook 的应用，掌握 useRef Hook 的高级用法，理解 Hooks 原理，掌握 react-router-dom 的应用。

3. Redux +中间件 + Redux Toolkit掌握 React 最常用状态管理工具 Redux 的基本使用，使用 react-redux 链接库在 React 中使用 Redux，掌握 Redux 中间件 redux-thunk 用来处理异步请求，掌握 Redux Tookit 简化 Redux 的使用。

4. 记账本案例利用 React + Hooks + Redux Tookit 实现记账本案例，对整个 React 阶段所学内容进行练习，验证我们是否掌握了 React 开发能力。

4.2、手把手快速带你开发微信小程序

本课程从小程序账号注册、开发环境搭建、基础语法、路由导航、数据请求、分包、组件化等方面详细阐述了小程序开发必备的基础知识。学完基础之后，利用 uni-app 技术实现微信小程序的开发，可以做到一次开发多端部署。项目拥有首页、搜索页、商品列表页、商品详情页、购物车、登录支付等主要功能。涵盖了分包、vuex、组件化开发等核心技术点的使用

学习目标

能够独立开发原生小程序，能够使用uni-app开发小程序，提高就业能力，是就业的加分项

主讲内容

1. 原生小程序了解小程序开发的一般流程序，熟悉小程基础组件的使用，能够基于 wxml 和 wxss 实现小程序的界面布局，基于模板的数据绑定实现数据的动态渲染，基于 API 实现与服务端的数据通信，以及熟悉其它高级 API 的使用。

2. uni-app理解 uni-app 实现跨平台开发的原理机制，理清单文件组件与原生小程序组件的对应关系，以及 uni-app 开发小程序时开发时与原生小程序的差异。

4.3、前端工程化

学习目标

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

主讲内容

1. webpack 核心学会 webpack 的配置理解 webpack 的作用与原理上手项目的打包过程配置拥有工程化的前端思维掌握前端工程化的常见工具及工作原理了解 webpack 性能优化了解 webpack 中的 tapable 了解 AST 的应用深入学习 webpack 原理，手写 webpack

2. 脚手架工具掌握 vue-cli 及相关配置掌握 vue-cli 初始化单页及多页项目掌握使用 create-react-app 搭建项目了解 create-react-app 的原理掌握 angular-cli 搭建项目了解 angular-cli 的原理掌握一个基础 cli 的功能实现

知识点：vue-cli | create-react-app | angular-cli | CLI 原理

3. git flow 全流程掌握提交相关：git rebase/git commit/git reflog/git log 掌握子模块: submodule/subtree 掌握分支管理：git fetch/git checkout/git merge 掌握重置及回退：git reset/git checkout/git rm 掌握多人协同 git 工作流掌握 git 常见的分支管理命令

4.4、前端服务化

学习目标

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

主讲内容

1. Koa / eggKoa / egg / 中间件

知识点：对 Egg 的功能有全面的理解 | 掌握使用 Egg 完成项目 | 理解 Koa 的核心设计思想 | 掌握 Koa 的中间件编写

2. NoSQLRedis / MongoDB

知识点：理解 redis 核心概念与使用 | 能使用 redis 运用到项目中 | 理解 MongoDB 核心概念与使用 | 能使用 MongoDB 运用到项目中

3. 性能监控服务端日志收集系统设计接入第三方监控平台服务端错误预警分析用户行为建立用户画像

4. SSRSSR 运行原理 SSR 环境搭建缓存和 stream 性能优化

知识点：理解 SSR 运行原理及为什么需要使用 SSR | 掌握 SSR 环境搭建 | 掌握使用缓存和 stream 对 SSR 进行优化 | 掌握 Nuxt.js / Next.js 的应用

第五阶段项目实战：

项目一、数据看板项目（立可得）

智能看板是一个数据可视化项目，通过折线图、K线图、柱状图等图表形式归纳汇总大量数据，以直观的方式展示数据。学员通过学习该项目，能够掌握数据可视化、异步编程、实时数据获取等技术解决方案，适合有基础希望技能强化的IT人员继续学习。

体验地址：立可得

学习目标

掌握Echarts 各类型数据可视化图表的应用能够根据需要求创建折线图、K线图、地图等图表掌握前后端分离技术的实现方式并了解其意义掌握使用token进行访问鉴权功能实现

主讲解决方案

基于 bootstrap 的响应式页面布局方案，基于 echarts 的数据可视化解决方案，基于 token 的访问权限控制解决方案

主讲知识点

基于axios 实现网站注册和登录功能基于 Echarts 结合需求高度自定义不同类型的可视化图表Ajax、数据渲染和服务端推送前后端分离技术的应用基于 token 的访问权限控制功能

项目二、面经全端项目（黑马面面）

黑马面面是一款面试刷题程序，系统包含答题状况管理、学科管理、企业管理、用户管理等综合管理功能。学员通过该项目可学习Element-UI功能组件、ECharts数据可视化、axios、JWT、Vue CLI、Vuex整体数据共享、Vue Router 等多个技术解决方案。

体验地址：黑马面面

学习目标

掌握 element-ui 组件库的运用，掌握 axios 以及拦截器的应用，掌握 Vuex 管理全局状态的技术解决方案，熟练使用 vue-router 管理组件的切换展示，掌握 element-ui 中如何自定义表单的校验规则，掌握文件上传和富文本编辑器在 Vue 项目中的应用，掌握 Vant 组件库的运用，掌握使用 postcss-px-to-viewport 实现移动端适配

主讲解决方案

token身份认证解决方案文件上传解决方案富文本编辑解决方案表单验证解决方案基于vant的移动端界面构建方案基于postcss-px-to-viewport移动端适配方案

主讲知识点

基于 vue-cli 创建工程化的 Vue 项目基于 element-ui 组件库快速实现项目布局用户注册与登录的业务解决方案使用 Vuex 管理全局共享的数据使用 axios 实现前后端的数据交互基于 vant 组件库快速构建移动端界面

项目三、iHRM人力资源项目

iHRM人力资源管理系统是一款在线HR人力资源管理系统，帮助企业管理人事信息、员工档案、绩效考核等。利用HR软件充分发挥人力资源的价值，通过企业人事HR管理人力资源，从而保持人才竞争力。

体验地址： iHRM人力资源管理系统

学习目标

掌握Vue + Element技术栈在开发管理型后台项目的技术开发能力具备角色，人员，权限类系统的设计整体设计及应用能力拥有Vuejs相关的技术要点及配套的插件，解决方案深度使用能力

主讲解决方案

基于element-ui和vue2进行大型中台项目开发解决方案基于axios封装请求工具模块解决方案基于token的前端登录解决方案vuex分模块持久化解决方案RBAC大型中台项目权限控制解决方案excel批量导入导出解决方案上传组件封装解决方案多语言动态主题解决方案树形结构处理解决方案

主讲知识点

vue-element-admin（请求模块化，请求工具拦截，scss 样式，布局组件）、 Vuex 持久化（state，mutations，actions，getters 和 modules）、 Vue CLI 配置(webpack)、反向代理、 ElementUI 表单校验（async-validator）、 vue-router 导航守卫、 token 认证、 token 失效控制、角色管理业务、 RBAC 权限、 Vuex + 路由 + RBAC、动态路由、角色权限、混入 mixns、工作日历、 Echarts 雷达图、全屏（screenfull）、 tabs 页多页签组件、 vue-i18n 国际化方案、 history 路由模式的应用、树形菜单、element 列表的数据过滤、导入导出 Excel、 Excel 复杂型表头、 PDF 打印（vue-print-nb）、el-upload 上传第三方云服务器、打包性能分析、 CDN 加速的实践应用、组件封装、业务组件封装

项目四、优医问诊项目（优医问诊）

Vue3+TS 优医问诊H5项目，对标【某香医生】、【某东健康】、【某里健康】等在线医疗项目，本项目涵盖了在线问诊的主流业务，致力于交付完整的在线问诊业务解决方案，让学员成为具备在线问诊业务能力的前端开发工程师。

体验地址：优医问诊

学习目标

掌握使用Vue3 + TypeScript 开发大型前端项目开发能力掌握使用Vant组件库开发移动端项目能力掌握 Pinia 状态管理工具实现项目状态管理掌握第三方登录和第三方支付业务解决能力掌握快速问诊等在线问诊主流业务开发能力

主讲解决方案

基于vue3.0+typescript中大型项目开发解决方案基于vant组件库快速构建H5界面解决方案基于vue-router的前端路由解决方案基于vite构建vue3.0项目解决方案基于pinia的状态管理解决方案基于pinia-plugin-persistedstate状态持久化解决方案基于@vuecore/use的组合API工具库解决方案基于id-validator的身份证信息校验解决方案基于postcss-px-to-viewport移动端适配解决方案基于vite-plugin-svg-icons的svg图标组件解决方案基于tailwindcss的原子化类名现代解决方案基于http://socket.io的即时通讯问诊室解决方案基于eruda 的移动端调试解决方案第三方登录解决方案第三方支付解决方案

主讲知识点

vue3.0框架、TypeScript使用、 vite前端构建工具、create-vue项目脚手架、vue-router路由、pinia状态管理、pinia-plugin-persistedstate状态持久化、sass预处理器、 vite-plugin-svg-icons图标组件插件、tailwindcss现代CSS框架、@vueuse/core组合API工具库、dayjs日期处理、vant组件库、 postcss-px-to-viewport移动端适配、 id-validator校验身份证、 http://socket.io即时通讯、 eruda真机调试、第三方登录、第三方支付、 vant组件二次封装、通用组件封装、 reqeust工具函数、组件按需引入、 steup语法糖、 pnpm包管理、第三方库类型扩展、自定义composable、 css变量

项目五、小程序

学习目标

能够独立开发原生小程序，能够使用uni-app开发小程序，提高就业能力，是就业的加分项

主讲内容

账号申请、开发工具、工程目录、项目配置、屏幕适配、资源托管、字体图标、数据绑定、事件处理、生命周期、场景值、模块化、网络请求、路由、 WXS、模板、组件、 UI 框架、表单、 Promise

2. uni-app理解 uni-app 实现跨平台开发的原理机制，理清单文件组件与原生小程序组件的对应关系，以及 uni-app 开发小程序时开发时与原生小程序的差异。

脚手架、项目配置、单文件组件、生命周期、条件编译、计算属性、跨平台支持、 less、 sass、组件通信

3. 电商项目基于真实需求综合运用小程序开发的相关知识，突出小程序 API 的真实应用场景，强化和巩固小程序开发的相关知识，提升综合解决问题的能力。

客户消息、微信支付、微信地址、小程序转发、区域滚动、上拉加载、下拉刷新、数据缓存、用户信息、自定义组件、微信登录、意见反馈、上线发布

项目六、小兔鲜电商小程序项目

Vue3.0小兔鲜儿电商是对标网易严选的综合品类的网上商城项目，本项目涵盖了电商的主流业务，致力于交付完整的电商业务解决方案，让学员成为具备电商业务能力的前端开发工程师。

体验地址：小兔鲜

学习目标

能够开发跨平台的小程序、能够独立开发小程序项目、掌握微信登录的实现方式、掌握微信支付的实现方式

主讲解决方案

小程序跨平台开发解决方案、小程序微信登录实现方案、小程序微信支付实现方案、下拉刷新/上拉加载交互实现方案、数据缓存实现方案

主讲知识点

uni-app跨平台开发框架、组件封装及通信、微信支付/登录、pinia 状态管理、基于vue3+ts技术实践方案、小程序云开发、vant组件库

5.1、简历&面试指导

最后就是简历了，毕竟学习不是目的，高薪就业才是我们的目标，关于如何写简历，简历模板，项目如何写，都在下面的回答里，可以自行查看。

面试前端工程师简历应该怎么写才容易通过？前端简历中项目描述怎么写能够更加的优雅？

作为一名前端开发者，我深知科技革命的推动离不开技术精英们的不断探索和努力。在我们的领域中，不断学习和掌握新知识也是我们不断进步的关键，而阅读是一个非常重要的途径，尤其是阅读关于前端开发的优秀书籍和文献，这些内容会成为我们成长路上的良师益友。

我个人认为，阅读是前端开发者中最具效益的个人成长方式之一。尽管书籍价格不高，但它们的内容和深度却可以帮助我们深入了解前端开发的各种技术和概念，这些知识也是我们在工作中不断迭代、改进和创新的基础。

因此，我强烈建议前端开发者在职业发展过程中注重阅读。如果你希望在前端开发领域获得更深入的发展，我建议你挑选一些有深度、有价值的书籍，并在实践中不断运用和总结，这将会帮助你不断提高自己的技术水平和能力。

以下这份包含103本前端经典书籍的书单（其中32本是豆瓣评分8分+），是我花费一个月时间整理的：

能看到这里，说明你的认真已经超过绝大多数人！所以，作为勉励，给你了准备几份礼物。

ps：我花了1个月的时间，总结了前端开发入门学习路线，以及每个阶段的最全知识点，HTML、CSS、JavaScript、Vue、React、Node、小程序等主流技术栈，希望能帮你解决资料缺乏的情况，可以点击下方链接领取：

❤️我给你准备的资料，区别于其他人随便拼凑的垃圾资料，真的是非常用心打磨的爆款干货合集，一定会颠覆你以往的认知，记得打印出来，带学习过程中去反复阅读参考～

为了写这篇内容，本来为数不多的发量也是日渐稀少。

欢迎点赞、喜欢➕关注 [ @黑马线上前端 ]，点击上方链接领取！！

如果看的不错，并且你有用的话，记得双击屏幕，一定记得【点赞+收藏】哦～

往期文章：

如果对你有帮助的话，点个赞收个藏，给作者一个鼓励。也方便你下次能够快速查找。

最后，希望喜欢学习的你们，坚持下去，做一个有知识的前端人，加油~

今天先分享到这里，写了好久的回答，看完了点个赞呀！！！

希望能帮助到更多人，别光收藏不点赞呀！

上一篇：难以置信什么是前端，前端的现状以及未来发展趋势,最简单的理解前端开发前端，啥是前端啥是后端，

下一篇：越早知道越好前端程序员已经饱和了？如果你能做到这3点，绝对超越95%的人前端，前端工程师饱和了吗，

干货满满前端工程师主要工作内容是什么？前端，前端工程师主要工作内容是什么意思，

一、什么是前端开发工程师？

二、前端开发工程师需要具备什么能力？

三、如何成为前端开发工程师？