Web前端开发需要哪些技术？这份技术宝典请收好！

Web前端开发需要哪些技术？相信学过前端的同学都遇到过这个问题，那么答案是什么呢？在回答这个问题之前，你需要先了解企业对前端工程师的技能要求。明确了企业的用人要求，才能更好的规划自己的学习路线！

来，就帮你梳理企业前端招聘实习和初级前端工程师的技能要求，可以根据自己的情况参考下。

岗位薪资：

一般月薪在 5-10K，根据城市和公司不同，有浮动。

岗位职责：

(1) 协助开发公司核心业务系统。

一般是给其他成熟的前端开发打下手。

(2) 根据产品需求，承担部分方案设计和编码工作。

通常不会要求编写核心业务，代码架构都是现成的，做一些修修补补的工作。

基本要求：

头部公司（如百度、阿里、腾讯、字节、美团、滴滴等等）一般要求在校或应届生，要有扎实的计算机理论基础；中小公司一般很少招聘实习生，如果招聘，也是为了压低薪资。

能力要求：

(1) 技术要求，一般需要掌握 WEB 前端开发基础：JavaScript（含 ES6）、HTML、CSS

(2) 素质要求，比如积极乐观，认真负责，乐于协作；

(3) 实习时间要求：比如每周工作至少 3 天以上，能保证实习时间 3 个月以上。

【建议】在校生或者应届毕业生找实习岗位，是一个不错的选择，一方面有进大厂的机会，另一方面给自己一个锻炼的机会。如果你在其他行业有工作经验，想转行学前端，一般不找实习的工作。

贴一个真实的JD：

岗位薪资：

一般月薪在10K-15K，根据城市和公司不同，有浮动。

岗位职责：

项目开发：负责公司WEB软件产品/系统的前端开发。这条和初中级前端开发要求一致。

基本要求：

要求有 1 年以上工作经验，计算机相关专业更佳，本科更佳。只要给面试机会，这个条件不重要，毕竟老板需要的是能干活的前端开发人员。条件好，薪资可以要的高一点。

能力要求：

(1) 扎实的前端基础：JavaScript（含 ES6）、HTML、CSS

这个基础必须要扎实，需要系统的学习和动手实战。

(2) 熟悉前端框架：Vue/React/小程序框架

这个只要会1-2个即可，因为公司的项目一般都是采用成熟的框架开发，你不用懂框架原理，会使用就行。

(3) 掌握Webpack、babel、eslint、git等工程化工具

这些是必须掌握的前端开发工具。每个工作的内容不多，开始只学会使用就好，完全可以做项目。

(4) 熟练掌握 http 相关知识等

要求这个是因为前端需要和后端合作，懂得 http，是接口开发的基础

(5) 了解 Node.js

Node.js 本身内容很多，但是初学前端，或者到公司这是做一个普通前端开发的话，不需要掌握多深，会使用它搭建工程化环境即可。

(6) 软性要求：比如良好的工作态度以及团队沟通协作能力，学习能力强，有较强的责任心

这些是每个前端开发人员的基本素质。

【建议】给你做个减法：只要掌握了JavaScript（含 ES6）、HTML、CSS和 Vue(或React，或小程序)，你就可以去应聘这个岗位了。

贴一个真实的JD：

岗位薪资：

一般月薪在15K-35K，根据城市和公司不同，有浮动。

岗位职责：

(1) 项目开发：负责公司WEB软件产品/系统的前端开发。这条和初中级前端开发要求一致。

(2) 架构搭建：参与前端工程体系建设，参与前端组件和架构的建设。这条要求较高，没有2-3年的前端工作经验，做不来。

(3) 产品设计：和业务产品一道思考升级产品功能和体验。这条需要有丰富的项目经验，要参与过各类项目的开发，了解各类业务需求。

基本要求：

要求有 3 年以上工作经验，计算机相关专业更佳，本科更佳。高级对于工作经验、项目经验有要求，除了头部企业外，一般公司对基本硬件条件（学历，专业）没有硬性的要求。

能力要求：

(1) 熟练掌握 WEB 前端开发技术：JavaScript （含 ES6/Typescript ）、HTML、CSS、DOM、协议、安全等

这部分基础要求的深度会比初中级前端开发要高一些。

(2) 框架和架构：掌握主流的Vue/React/小程序技术栈以及Webpack/Rollup等打包构建工具，有复杂的移动端Web架构的经验；

高级前端对框架、工程化、架构都有要求，要有丰富的实战经验。

(3) 后端要求：熟悉至少一门后端编程语言如 Node.js 等，有实践经验优先

一般要有后端开发经验，比如Node.js, Java或Go等。

贴一个真实的JD：

看到这，如果你是前端小白，对于技术名词可能有些懵，没有关系，混个脸熟就行。你只要知道你将来的奋斗方向就行了。

下面，贴着一张完整版的Web前端学习路线，web前端需要掌握的技术一目了然！

如果你想掌握这些前端技能，可以参考我准备的这套前端学习路线+教程，零基础学前端入门必备！go...

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

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

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

HTML+CSS教程，零基础web前端开发入门必看视频

本系列从概念到具体基础知识点全程干货满满，为前端小白入门找到了很好的学习抓手，可以作为前端开发学习“梦开始的地方”，老师深入浅出的讲解和动画视频解析并用真实的案例巩固知识，学练结合，打好基础，不怕学不会！

2、 页面布局实战

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

web前端项目实战之拉勾网（项目上手）

本课程讲的是HTML+css pc端项目实战，通过讲解拉勾网得首页、登录页等，学完即可进一步学会应用HTML+CSS，掌握页面布局和标签、属性等的使用，让你从小白进化为真正的网页美化师。

javascript（基础+进阶）→ ES6→ Ajax→ Promise→Git→node.js→PC端全栈项目开实战

1、javascript（基础+进阶）

JavaScript全套视频教程（10天学会Js，前端javascript入门必备）

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

2、ES6

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

最新版Web前端ES6-ES13教程，JavaScript高级进阶视频教程

本视频主打内容最全最新，包括ES6-ES13所有新特性 以及 实战应用，打造一站式知识长龙服务，适合有JS基础的同学学习。

3、 Ajax

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

web前后端交互Ajax从入门到精通全套教程

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

4、 Promise

Promise 是异步编程的一种解决方案，比传统的解决方案回调函数, 更合理和更强大。ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象 。

web前端进阶Promise js从入门到实战全套教程

本视频主打内容最全最新，包括Promise基础语法、手写Promise、async与await 以及 实战应用，打造一站式知识长龙服务，适合有JS基础的同学学习。

5、 Git

前端Git教程，从入门到实战迅速上手git

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

6、 node.js

前端Node.JS教程,快速入门nodejs全套完整版

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

7、 PC端全栈项目开实战（2选1）

PC端原生JavaScript项目案例实战开发

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

web前端js+nodejs后端express框架博客系统项目实战教程，前后端交互开发毕设项目

本套使用主要教会大家，如何利用nodejs的一个express框架和js开发一个blog项目。教会大家使用js做后端，使用js做前端，成为一名全栈工程师。

适合作为一个课程设计或者毕业设计，最终我们实现了一个完整的博客系统，包括用户的登录、注册，图片上传，文章的发布、富文本编辑器、删除、编辑、修改、列表展示，评论的发布、删除、列表展示。最终实现了用户的文章和评论的后台管理和博客的前台展示和评论功能。

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

1、 vue2+vue3

Vue2.0+Vue3.0全套教程，vue.js零基础入门到vue项目实战，前端必学框架教程

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

2、 vue实战项目

Vue+ElementUI物业后台管理系统

vue项目实战，Vue+ElementUI物业后台管理系统

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

3、 Pinia

前端Pinia教程，Pinia+vue3+vite+ts+腾讯IM聊天解决方案项目实战

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

4、 React

React全家桶教程_react零基础入门到项目实战完整版

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

5、 React实战项目

全球新闻发布管理系统

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 ——基于腾讯云音视频跨平台应用

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

4、Uniapp

前端uniapp入门到实战项目教程(微信小程序+H5+安卓APP+IOS APP)

前端项目_uni-app入门到实战项目之《仿网易云音乐》

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

5、Uniapp 实战

Vue项目实战，uni-app蛋糕订购项目开发教程（vue+uniapp+小程序）

本项目是一个面向部分城市群体的蛋糕定制网站，为指定区域的用户提供在线定制、实时配送，打造线上线下相结合的个性化蛋糕定制服务。

webpack5→Vite2→typescript

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

1、webpack5

前端webpack5全套教程，全网最完整的webpack教程（基础+高级）

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

2、Vite2

前端Vite学习指南，基于腾讯云的项目教程

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

3、typescript

前端 TypeScript 入门教程

本套视频将从官网的知识点入手，分为基础篇，高级篇，案例篇及项目篇共4个篇章，结合案例循序渐进带你入门TypeScript。本视频还有配套详细版的文字笔记，帮助大家从 0 到 1 学习TypeScript,让你能读懂别人的TS代码的同时也能编写自己的TS代码。

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

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