主流网站的前端组件化开发，怎么制定Web前端学习计划 – 前端技术 – 前端|

电脑按完f8后怎么操作，pdf怎么打开图片，网页怎么布局主流网站的前端组件化开发,怎么制定Web前端学习计划

随着移动互联网的发展，前端开发成为重点。移动端有多个平台，Android，iOS，微信小程序，支付宝小程序，还有不断出现的新操作系统，比如阿里YunOS，华为鸿蒙，等等。

为了支持这些平台和系统，越来越多的应用开始使用H5跨平台架构，现在有个新名词叫做“大前端”。

一，H5跨平台开发

这时的H5前端开发已经不再是单单的网页开发了，而是前端应用开发。具体到H5 Hybrid架构，常用三剑客：HTML, css, JavaScript

1) HTML和css是页面设计，没有代码逻辑

2) JavaScript编程，还有其它衍生语言，比如常用的TypeScript

JavaScript是一种脚本语言，由解释器加载执行，常用在网页前端动态展示、和服务后端交互等场景。接下来重点介绍JavaScript开发。

二，学习阶段和时间计划

1）编程基础，一到两周

学习JavaScript语言基础，掌握基本的编程方法。如果对着课本教程学习比较枯燥，难以坚持，那么可以使用网上的一些学习练手资源，边学习边动手，比如HackerRank

2）开发框架，一到两月

JavaScript前端开发有很多成熟的框架可用，比如JQuery, AngularJS，React，还有前后端都跑通的NoteJS。阿里开源框架Ant Design Pro是一个功能完善的脚手架，推荐新学者练手。

新手学习时，推荐当前普遍使用的Top3开发框架，太新或者太旧的都不适合用来学习练手。

3）项目经验，一到两年

学习的最终目的是学以致用，在实际项目中积累经验，不断提升。有了一定技术基础后，推荐尝试参与开源项目，在开发功能、提交代码的过程中，提升非常快。而且开源项目经验，和工作经验一样，应聘时非常受欢迎。

偶是工作多年的Web应用架构师，欢迎关注偶，了解更多IT专业知识。

前言

学习Web前端开发，需要的基本条件就是一根网线+一台电脑。对于想要学习Web前端的同学，可以按以下步骤来进行学习。

熟悉HTML

HTML就犹如人的骨架，是一个页面的基本组成。HTML所需要学习的内容就是HTML标签。标签都是由开始标签和结束标签构成，同时标签也会有一系列的属性。如下所示：

运行效果如下所示：

推荐阅读书籍《HTML＆XHTML权威指南》

熟悉CSS

CSS犹如人的肤色，CSS用来确定HTML标签各位置的摆放以及界面的视觉效果，比如标签的大小，字体颜色等设置。代码示例如下：

运行效果如下：

推荐阅读书籍《CSS权威指南》

熟悉JavaScript

JavaScript犹如人的血液，正因有了血液的流动，人才有活力，正因有了JavaScript，页面才有了交互。代码示例如下：

运行结果如下：

JavaScript推荐阅读数据《JavaScript高级程序设计》

组件库和JavaScript框架

有了前面三步，大家就掌握了Web前端开发的基础了。但在实际工作开发中，为了提高开发工作效率，大家还需要掌握一套组件库和对应的JavaScript框架。

较为流行的组合有两大类：element组件库+Vue框架 和 Ant Design组件库 + React框架。但在国内的公司当中，element组件库 + Vue框架的这种组合使用更多一些，所以也推荐初学者可以先掌握Element组件库 + Vue框架的方式来进行学习。

总结

以上就是学习Web前端的步骤和相关资料，希望能帮到有想法进入Web前端的小伙伴们。如有其他疑问，也可关注私信与偶。如果觉得问题文章不错，欢迎大家关注转发哦！

关注偶，不定期分享好玩科技知识，带大家一起体会探索科技的那份独有思考和乐趣。

偶是一个有10年项目架构经验的java软件工程师，欢迎关注偶，了解更多java前沿技术!目前都使用微服务实现模块化Web应用。