成为Web前端开发工程师的学习指南

phpcms 20 由原9466article升级升级更名而来，是一个可以全站生成html的综合网站内容管理系统，能适应大中型网站的需求。

目前PHPCMS以新闻文章管理系统为主，同时有公告管理、友情链接管理、数据库管理、语言管理、风格模板管理、用户管理、JS文件管理等小的辅助功能模块。PHPCMS集多功能于一体让用户实现在线可视化管理网站，因此安装和使用PHPCMS无须专业知识。

[主要功能]

1、全站生成html，减轻服务器负载，提高访问速度，更容易被搜索引擎收录，是大中型站点的必然选择。

2、多语言支持，语言包与程序分离，目前默认支持简体中文、繁体中文和英文三种语言，用户还可以自己添加其他语言，前后台可以设置不同的语言界面。

3、多数据库支持，目前默认支持mysql数据库，我们在后期会逐步加入其他数据库支持

4、多模板支持，各栏目和专题都可选用不同的模板，而且全部从后台控制。

5、多风格支持，每种模板又可具有不同的色调风格，各栏目和专题都可选用不同的色调风格，而且全部从后台控制。

6、采用ewebeditor正版在线编辑器，具备frontpage和dreamweaver的绝大部分常用功能，支持数学公式，支持艺术字，支持各种文件的上传和插入

7、多管理员，可自由划分权限

8、支持无限级分类，满足各种不同的应用需求

9、栏目控制参数非常多，比如可设置是否允许发表评论、外部连接、是否开放、栏目模板、栏目风格等等

10、支持回收站，可避免很多误操作造成的不必要的损失

11、支持专题设置，可随时根据需要开设不同的专题，而且可锁定过期专题，锁定后该专题就不会出现在发表文章的专题列表里（在专题非常多的时候很有用）

12、支持公告，可设置有效期，过期后不再显示

13、支持友情链接，既可后台填加也可前台申请，支持JS远程调用以应用于其他的系统

14、支持广告管理，可自由填加广告位，自由发布、FLASH、文字和代码广告，可随时全面控制整个网站的广告

15、支持数据库备份，可同时备份到服务器和本地计算机，以确保安全

16、支持文章、公告、友情链接和广告管理的纯静态型JS调用，并且可以在线设置JS的相关参数

17、升级支持，智能化升级提示保证随时了解并升级到最新版本信息，后期我们还会增加智能化网络自动安装和升级支持，完全在线操作无需FTP即可实现安装和升级。

18、可在线导入新的模板和风格，在线编辑模板和风格

19、后台全傻瓜式控制整个网站，一旦安装成功后即可在线管理而无须FTP或者另做网页

20、支持文章自动分页和手动分页

21、支持投稿、评论、搜索

22、支持栏目、文章等各种批量操作

23、支持自动获取远程

24、支持文章，还可根据文章参数的设置文章的标题样式

25、支持文章审核、置顶、推荐

26、支持web发送email给好友推荐文章给站长留言

织梦内容管理系统

http://wwwdedecmscom/

织梦内容管理系统特点：

1、基于PHP+MySQL的技术构建，支持全生成静态文章和文章列表，加速你的网站访问速度，增强搜索引擎优化；

2、强大的后台管理，权限分为网络管理员、频道编辑、信息采编三种，完全适应各种中小型政府网站、个人网站和普通企业网站的应用；

3、可任意设置文章的浏览权限，支持会员在线申请为不同级别的权限；

4、定义了针对不同类型内容的各种向导，包括：普通文章向导、专题创建向导、图集发布向导、软件下载向导和Flash向导；

5、包含站内新闻、投票、友情链接管理等模块，支持会员投稿功能；

6、内置站点文件浏览器、浏览器、完美的数据备份方案；

7、内置针对入门用户和的主页创建向导，可轻松生成网站首页；

8、XML名字空间样式的模板代码，更清晰、更简单明了，支持双重模板技术，代码更灵活，支持RSS 20……

野猫 ymCMS

http://wwwyemaocom/

功能说明：

1 前台使用模板技术，程序和界面分离；

2 支持web安装方式，简单易用；

3 上传功能分离，可上传多种类型文件，可统一管理上传的文件；

4 标题和内容都支持BB代码；

5 支持推荐给朋友功能；

6 由WEB后台管理系统设置；

7 支持批量编辑/修改；

8 支持搜索功能；

9 可进行用户分组，按不同用户组设定不同权限；

10 支持多风格选择，可按系统，论坛/分类，用户设定风格；

11 支持悄悄话功能；

12 支持缓存功能，可有效减少对数据库的读取和加快速度；

13 可分别设定用户组在论坛/分类中的浏览，发表，编辑和删除的权限；

14 支持ip禁止功能，可禁止设定的ip或ip段不能访问系统；

15 支持字词过滤功能；

16 上传文件可设置存放路径；

17 后台可检查，修复和优化数据表，可分卷备份和分卷还原数据；

18 论坛支持无限分级，并分别设置版主；（BB）

19 支持PHP/JS调用论坛主题；（BB）

20 精华贴功能；（BB）

21 内部论坛、只读论坛支持，可关闭主题；（BB）

22 支持在论坛首页、板块页面直接进入最新主题的连接；（BB）

23 板块页面、主题页面快速发表主题/回复帖子功能；（BB）

24 随机表情图标功能；（BB）

25 论坛/分类置顶功能可分级别；（BB）

26 文章分类支持无限分级，并分别设置版主；（Info）

27 支持HTML可视化编辑，可根据不同用户组设定权限；（Info）

28 支持 [page] 分页和按篇分页，按篇分页可为每页设定小标题；（Info）

29 首页信息功能；（Info）

30 一句话信息，相关链接功能，文章带简介和；（Info）

31 稿件置顶功能；（Info）

32 相关信息功能；（Info）

33 评论功能，前后台均可管理评论；（Info）

34 稿件字体放大缩小功能；（Info）

35 支持PHP/JS调用某类别或所有类别的最新/最热门信息；（Info）

36 支持按用户组设定稿件审核功能；（Info）

37 稿件可按分类设定是否生成准静态文件，存放路径可设置；（Info）

38 前后台均可管理稿件；（Info）

39 其他功能

CMSware

http://cmswarecom

CMSware全新的系统结构，处处体现了自由的思想，让您体验自由管理的非凡感受

1、所见即所得的编辑功能

CMSware的内容录入界面充分考虑内容维护人员的实际情况，他们可能不精通HTML，但他们会使用Word等办公软件，因此，系统界面与Word 等Office产品紧密集成，可直接从Word里拖动一块内容到CMSware中来。用户也可以在CMSware里直接进行文字的排版处理，比如改变字体名称，字体大小，字体颜色，背景颜色，以及对齐样式等等。还可以透明地插入，并可以任意调整的位置、大小，与文字进行环绕等等。系统还支持插入 Flash动画，超级连接、特殊字符等等。系统会自动将插入的、Flash 等文件上传到系统中合适的目录，而无需用户关心这一切。

2、多级内容维护人员支持

CMSware使用基于角色的用户管理，通过添加不同权限的用户,你可以将一个网站的管理权限分配给不同的用户即可以由多人同时管理一个网站 CMSware的用户管理模块使得一切都变得如此轻松通过建立具有不同管理权限的用户组，可以将用户分成多种级别，超级管理员，分类管理员，以及最基本的文档录入，审核员。一篇内容从最初录入到最后发布到网站上，中间需要经过管理员审批。管理员登陆系统编辑文章并审批，保证内容及时地更新到网站上去。

3、先进的模板管理模块

我们充分研究了国内外的内容管理系统，发现他们大都能够实现结合模板自动生成页面，减轻了页面制作人员的工作量，但是模板制作本身缺要求有较高技术水平的人员，有些系统要求使用基于XML的程序语言XSLT来制作模板，有些系统要求UNIX下的TCL语言来写模板，真可谓是减少了HTML设计人员，却增加了XML编程人员，没有从根本上减轻用户的负担。

模板的目的是决定系统中录入的内容如何生成成HTML页面。模板其实跟一个普通的HTML页面差不多，在其中固定的位置，插入内容采编系统中输入的字段信息，就生成了最终的HTML页面。

系统提供所见即所得的模板编辑工具，一个普通的HTML制作人员经过短暂的培训即可制作模板。模板对于整个网站只需要一次性制作，即可一直使用。

在CMSware的前身iwpc里提供了一个类似word的所见即所得的可视化模板编辑器(WYSIWYG)，可以直接让设计师就可自行完成整个模板的制作。编辑器集成系统资源调用标签和系统函数调用标签,你随时可以查阅调用标签模板都是HTML文件，即可用在FrontPage里，也可以用在 Dreamwaver中，设计师只要先使用自己熟悉的工具，如FrontPage、Dreamwaver等做好静态的页面，然后，在适当的地方插入 CMSware调用标签，一个模板就做好了，不需写任何一行代码。"系统调用模板","系统调用函数文件",极大方便用户扩展系统功能 程序还支持自定义js模板功能，使得文章列表的显示更加灵活，定制更加容易。

而在CMSware中采用类似XML的标签，同时兼容iWPC原有的调用函数标签，提供更先进、更强大的系统数据调用功能。并增加了Dreamwaver制作插件，能直接在Dreamwaver里使用菜单方式设计模板，不需要学习语法。

4、文件管理模块

文件管理模块为网站的管理人员提供了一个类似Windows Explorer界面的文件管理器，允许管理员像管理Windows的文件一样管理网站中的所有文件，包括文件、包含文件等。每个分类有独自的文件管理模块，以便支持不同的管理员同时对自己所管理分类中的文件进行管理。

5、多种发布机制(静态/动态)

CMSware可以将网站内容全部生成静态HTML文件,这样可以极大地节约主机资源，提高系统性能，全静态处理技术是做为构建大型站点的必要条件。无论是再强大的CPU，再高明的数据库，在大量用户访问的情况下也会当机的，而使用我们的程序会避免此类问题发生。这也就是为什么“新浪”“网易”甚至包括 SOHU的网站搜索界面都是静态发布的原因了。

CMSware还在前身版本iwpc的基础之上，增加了动态发布方式，让用户可以对内容页面进行更细致的权限和动态功能进行管理，实现动态网站。

6、专题管理

对于新闻类网站，当一些突发事件发生时，来不及专门新开栏目，这时可以将有关该事件的内容整理成一个专题。CMSware允许编辑自行根据情况随时增加新的专题，在第一时间给网站的访问者提供丰富的相关信息。专题中的内容即可以是从其他频道里挑选出来的，也可以直接让记者或编辑往该专题里录入内容。

7、强大的内容调用首页完全自主设计。

首页的多样化是吸引大多数网友的必须条件之一。CMSware分类栏目首页完全自主定义。包括新闻，显示是否调用时间，栏目，静态模块的放置位置等等。也就是说可以达到想做静态网页那样的效果，想怎么做就怎么做，唯一的区别是，她方便，刷新形成静态内容，或直接生成动态内容。

8、无限级分类

CMSware支持无级分类，你可以无限制的对分类建立子分类 。而不是固定的一级或者二级分类。更适合结构复杂的大中型网站。

9、支持搜索引擎

借助全静态发布技术，CMSware全部的HTML界面使您的网站出现在搜索引擎的几率大大增高。搜索可是大多数网友获得网络资源最主要的一步。可以说，而您选择CMSware发布网站，就是选择了搜索引擎的一个位置

10、远程安全发布

CMSware支持远程发布，既支持对远程服务器和数据库的发布，使用CMSware可以对多个网站进行发布管理，实现了用一个网站管理工具对多个站点的同时管理，这样就减轻网站管理员的工作量。只要CMSware里设置好站点的发布地址，选择要发布的站点地址，然后就可以在CMSware里对站点进行远程管理了，在CMSware里编辑过的内容，CMSware就会自动的发布到已选择好的站点地址里。

由于管理服务器和发布服务器分离，还大大提高了网站管理服务器的安全，如果发布服务器出了问题，只要在管理服务器重新全部发布部署就可恢复网站。

11、自定义数据库（字段自定义）

CMSware彻底改变了新闻类网站发布系统的传统，为了更体现自由管理的精髓，增加了自定义内容模型的功能。用户可以利用这个功能方便定制自己的各种内容来发布（下载、音乐、册、产品展示、人才、酒店预定。。。），CMSware发布系统核心自动处理实现发布功能，还可以外挂配合专门的动态处理程序来实现特别处理。

12、语言包支持

通过简单的替换操作就可以更换成其它语言，方便的实现多语言版本。

13、多数据库支持

全新的数据库引擎，全面支持主流数据库。默认支持MySQL，并可以通过更换引擎接口就方便的更换到Oracle、MS SQL Server、PostgreSQL等主流数据库。

14、更加人性化的操作界面

支持右键菜单，大部分复杂操作只需点击鼠标即可轻松实现。类似Windows资源管理器的文件管理界面，基于Web页面随处管理网站内容。

15、简洁的内容管理工作流

特别适合大型综合门户的内容采编、投稿、审核工作流的实现，用户投稿界面与后台管理界面分离，投稿编辑只接触投稿层。从用户投稿到审核到发布，所有环节流程都由用户自己定夺，适应不同环境的应用要求。

16、自由的内容自动采集功能

CMSware还提供了专门的内容采集模块，经过设置，可以自动采集对应网站的内容，并且实现了资源自动本地化，从而可以大幅降低采编人员的工作量。

CMSware的自动采集功能不同于普通的采集模块，可以自由的分来源细项来设置要采集的内容，可以采集非常复杂的来源页面，并且可以配合内容模型自动归类整理。

17、更多自由特性

简洁的后台管理结构，没有复杂性，容易管理。

发布文件分卷保存目录可定制性，你可以实现2003/10/05/xxxhtml或者2003-10-05/xxxhtml这样的目录结构。

发布文件后缀可定制性，你可以使用html,shtml或者xml作为静态文件的后缀。

高级文章评论功能，可以实现类似sina的文章评论功能，高级搜索功能，方便资料查找。

分类模板继承：可以在新建目录时选择是否安装默认模板，如果你不对子分类设置内容页模板，该分类将自动继承上级分类的模板体系。

首页可以调用自动缩略图生成。结合调用页面显示的实际需求，可以自动把图文文章的生成缩略图，加快网页下载速度。

方便的发布助手，极大方便批量更新整个站点，你要做的只是点击几下鼠标，然后就去喝杯咖啡。

安装时可选的用户密码加密功能，支持“MD5”,“DES”,“none”三种模式，进一步强化系统安全。

文章支持多页显示,即一篇文章可以分成好几页，还支持相关文章连接。

系统支持过期内容自动归档，可以自己设置过期时间。

数据库优化和备份功能等等。

简洁明快的全自动安装过程。

随易

http://wwwcmsezcom

什么是Cmsez

随易全站系统(Cmsez)是门道科技推出的企业级建站平台系统,致力于帮助企业提高运作效率、降低建站成本、拓展商业机会，是一种高度可管理、低成本、易部署的IT建站平台。Cmsez集成了丰富的功能模块，包括用户管理、新闻发布、信息发布、产品展示、管理、附件管理、在线商店、资料下载、多媒体浏览/播放等。额外针对特殊行业,提供酒店房间预订、旅游线路预订、招聘信息管理、信息简报等功能模块。

企业建站系统是面向企业的，主要提供企业内部信息交流、对外商务沟通的服务。其目的是给企业提供更方便的展示方式，增强企业和客户之间信息共享和沟通能力，提高工作效率，减少企业宣传费用等，从而为企业节省开支，同时也能创造一种新型的企业文化。与其他同类产品相比，Cmsez是唯一一个提供一站式企业建站解决方案的系统，我们提供了涵盖企业网站各个方面的功能模块，并且我们强有力的开发队伍，保证企业网站绝不落伍。我们坚持“软件以用为本”的原则，努力使操作简单化、流程简洁话，力使无论企业规模、无论维护人员水平如何，都可以使用Cmsez架设一个企业网站。同时，我们提供广阔的扩展空间，使得企业发展的同时，可以以很少的成本，让企业网站同步前进。

Cmsez是门道公司应企业建站市场的需要推出的用于企业建站的新的核心技术品牌，该品牌从2003年11月份正式开始启用，它的前身是Xplus建站平台 (Xplus WCMS)。 Cmsez的中文名称是“随易”。

简练

Cmsez是一个高度继承化的系统，全部模块基于同一个内核，因此流程简洁、统一，操作人员无需专门针对每个模块进行操作培训即可掌握全部模块的操作方法，达到一处通，处处通的效果。

快速

Cmsez作为一个建站系统，与着传统建站方式或者定制开发建站方式在速度上相比，不可同日而语。从安装到完成一个简单企业网站的构建，如果资料完备，并排除美化工作，只需要3个小时的工作时间，极大的缩短了网站创建、部署、维护的时间。

协同

Cmsez架设的网站，具体分到各个栏目，可以分别设定一个或者多个管理员，同时基于web的B/S结构的设计，可以提供多人的信息的分散管理、不同部门的人员能够协同工作，完成一致的工作目标。

高效

Cmsez系统内置多个缓存系统，包括系统参数缓存，模板缓存，数据库缓存、站点结构缓存，并提供全站静态化输出机制。这些特性保证了系统的高性能以及极大的降低硬件的压力。

可扩展性

Cmsez系统极佳的内核特性，可以快速的定制和开发同类型的信息发布模块。采用先进的开放标准，保护每一项技术投资。

phpArticle 文章管理系统

http://www21dsnet/

phpArticle 200 详细功能解说

程序安装

全自动安装,只需要一两分钟时间就可以安装完成

数据库支持

目前只支持 MySQL

安全性

比起前一版有了较大的提高

无限分类

分类没有任何数量限制

无限子分类子分类中可以再包含子分类支持无限多级分类

新闻

只显示于首页,用于发布网站的最新动态

可以自由分配发表新闻权限给不同的管理员

文章

支持多页,没有页数限制

文章使用 WYSIWYG (What you see is what you get) 所见即所得编辑器发布,非常方便,就象使用 FrontPage 编辑网页一样简单还支持网页内容的复制与粘贴,即可以重一个网站简单的用鼠标选中内容复制,再在 WYSIWYG 编辑器中粘贴一下,就可以把该网页的内容,包括文字,,连接,等复制下来

相关文章,在发布文章时,只要输入关键字,文章就会自动搜索相关的文章并显示在相关文章列表当中

相关连接功能,这是由发布者输入该文章的相关连接

文章评分,会员可以对文章进行评分

文章评论,会员可以对文章进行评论,评论可以回复引用等

所见即所得编程器

投稿

会员可以投稿,即发表文章

而会员所发表的文章,必须通过管理员审批,才能显示

图库

可以通过web的方式上传,每次可以同时上传多个

以文件形式保存在服务器上,不必担心会占用你宝贵的数据空间

上传的可以方便的通过 WYSIWYG 编辑器插入到文章中,WYSIWYG 编辑还具有预览功能

会员机制

会员注册功能

收藏夹,会员拥有自己的收藏夹,可以自由收藏文章

会员可以对文章进行评分

会员可以对文章进行评论

会员可以发表自己的文章

多个用户组别,用户可以更换组别,每个组别可以自由设置权限管理员可以自由添加设置

在线人数的统计

多级管理

多级管理,可以分配给不同的用户管理不同的分类或所有分类,由管理员自由设置,还可以通过设不同组别的权限,实现管理权限的限制基本的权限包括添加,编辑,删除,审批文章,添加,编辑,删除分类及子分类添加,编辑,删除新闻

默认有五个组别：超级管理员,普通管理员,一般会员,游客,待email激活会员

模板技术

模板把 html 代码与 PHP 代码完全的分离,只要通过修改这些被分离出来的html 代码,就可以达到修改界面的目的

模板的修改非常简单,就只是编辑 html 代码

可以同时拥有多套界面,每个分类也可以定义一套界面,不必担心每个页面都相同

方便的后台模板管理机制,可以添加自定义模板,编辑默认模板,删除等操作

模板搜索/替换功能,可以方便查找出想修改的地方,并方便的修改替换

可以方便的备份或还原模板备份只需要点击下载,就可以把当前的模板导出为文件并下载保存,而还原,则只是简单的选择所备份的文件并通过上传导入等操作即可以还原出备份的模板

数据备份,修复,优化

系统自带数据库备份功能,可以有选择或无选择的备份所需要的数据

同样,还具有数据库修复与优化功能,可以在某些情况下达到数据库修复或优化的目的

OpenGoo PHP开源文档管理系统

OpenGoo是一套基于ExtJs+XAMP（Apache、PHP、MySQL）开发的开源web office。适用于任何单位或个人创建，共享，协作维护和发布它们所有内部与外部文档。

relayb

relayb是一个Ajax目录管理器。支持拖放操作文件和文件夹。动态加载文件结构。文件上传提示进度条。缩略图查看包括PDF格式，支持多用户和多账号。

Simple Directory Listing

Simple Directory Listing提供一个类似于apache http服务器目录列表的文档管理界面。拥有复制，移动，删除，重命名，创建文件夹/文件。上传/下载文件，Unicode支持，缩略图查看，RSS发布等。

CKFinder

CKFinder是一个易于使用的Ajax文件管理器。提供文件夹树形结构（Folders tree）导航菜单，多语言支持（自动探测用），支持创建/重命名/删除文件和文件夹，集成FCKeditor在线编辑器。

phpWebFtp

phpWebFtp是一个基于Web的Ftp客户端，可以连接至任意Ftp服务器。内置22种语言包。易于在Binary/ASCII两种模式下切换。提供WYSIWYG文件编辑器用于编辑htm文件。内置文件与目录下载模式。支持解压zip文件等。

CuteFlow

CuteFlow是一个基于Web的文档流转/工作流工具。用户定义好一个文档之后就会按指定的流程一步一步地转发给列表中的每一个用户。

Epiware

Epiware是一个AJAX支持的项目与文档管理Web应用系统。它提供了一套完整的文件管理功能包括文档上传，下载，版本控制，审核，变化通知和访问历史列表等。Epiware还为开发团队创建一个安全的信息交流与相互协作平台。

PHP Navigator

基于Web运用PHP+Ajax技术开发的PHP开源文档管理系统。它具有WindowsXP风格的操作界面。使你感觉像在Windows中。

DocMgr

DocMgr是一个基于PHP+Postgresql构建的Web文档管理系统。支持利用tsearch2对大部分流行的文档格式进行全文索引。它同样包含访问控制列表，用户权限管理和文件多级分组功能。

SimpleDoc

SimpleDoc是一个基于web的PHP开源文档管理系统。它的界面简单而且直观(以树的结构进行管理，运用Ajax技术使得当修改内容时不需要刷新浏览器)。SimpleDoc不需要数据库支持。

DocumentManager

Document Manager是一个包含权限管理与邮件提醒功能基于Web的文档管理器。无需要数据库支持。

KnowledgeTree

KnowledgeTree是一个开源基于Web的文档管理系统。它具有知识管理，文档版本控制，分层文档管理和支持一些流行的文件格式也可以自定文件类型等。

Owl Intranet Engine

Owl是一个多用户的PHP开源文档管理系统。它可对文件夹和文件设置权限，基于角色权限管理，具有易于使用并且简洁的用户操作与管理界面，能够对文件夹和文件 进行监控，支持对文本，MS-Word和PDF文件进行全文搜索，提供下载统计功能，数据库备份工具，新闻系统，版本控制，回收站，自定文档类型等等。

更多详细的可以去看这篇文章http://wwwphpcn/php-weizijiaocheng-304283html，希望对你有帮助

今天小编要跟大家分享的文章是关于成为web前端开发工程师的学习指南。想要学习web前端开发技术的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。

1、首先确定你的目标或道路

我们将讨论很多技术，趋势和工具，但我们不希望您不知所措，因此你需要首先决定要成为一名Web开发人员要做什么，因为这将帮助你选择合适的工具。和学习技术。成为Web开发人员的原因有很多，下面列出了一些选择因素：

·你想作为一名Web开发人员在一家公司工作，这是最普遍的原因。

·你想以自由开发人员的身份来开始自己的业务或代理。

·你可以成为其他公司的顾问。

·你可以创建自己的应用来赚钱。

·编码是你的业余爱好。

从上述感兴趣或目标的领域，你可以选择适用于你的目标的正确工具和技术。如果你的目标是成为一名前端开发人员，则可以选择前端开发的工具和技术。后端和全栈开发也是如此。

2、Web开发的基本工具和软件

·

计算机和操作系统：如果没有计算机和操作系统，则无法编写代码。要学习Web开发，你不需要任何高端计算机(如果你拥有的话，那么更好)。你可以使用任何类型的中型笔记本电脑或台式机。对于操作系统，可以使用适合你的MacOS，Windows(最新版本)或Linux。

·文本编辑器/

IDE：毫无疑问，VSCode适用于大多数情况和大多数语言。它具有良好的性能，出色的扩展性，内置的终端功能以及大量功能。在2019年StackOverFlow调查中，VSCode也是开发人员的首选。你还可以选择其他一些不错的选择，例如Sublime

Text或Atom。如果我们谈论IDE，那么是Visual

Studio(#或C#)，Eclipse和Netbeans(Java)。是不错的选择。

·

Web浏览器：大多数开发人员的首选是Chrome或Firefox。Chrome速度很快，并且使用V8引擎(JavaScript引擎)。Firefox也取得了长足的进步，其中的一些好东西不在chrome浏览器中。两种浏览器都有出色的开发工具，可以对Web开发中的问题进行故障排除。

·终端：您将使用一些系统命令来使用CLI进行很多工作。您可以将默认或第三方终端用于您的Web开发项目。Bash，Zsh，Powershell，Git

Bash，iTerm，Hyper这些都是可以使用的选项。

·设计(可选)：并不是每个人都需要学习。在公司中，有专门的团队来制作图像，徽标或草图，但是如果您是自由职业者，则可能必须学习Adobe

XD，Photoshop，Sketch或Figma。

3、从HTML和CSS开始

HTML和CSS是Web开发的基本构建块。无论您的Web应用程序有多先进，或者使用什么框架和后端语言，都必须使用HTML和CSS构建前端应用程序。因此，这是在Web开发中要学习的第一件事。

·HTML5(语义元素，属性，文档类型等)

·CSS基础知识颜色，字体，位置，盒子模型等。

·CSSGrid和Flexbox对齐内容或创建列。

·CSS自定义属性

4、响应式布局

您的应用程序应该在所有类型的设备(例如智能手机，平板电脑，台式机，iPad或任何其他屏幕尺寸的设备)上都可以查看和使用。因此，了解创建响应式设计或布局非常重要。让我们来看一些重要的主题。

·了解如何设置视口

·媒体查询不同的屏幕尺寸。

·流体宽度

·雷姆单位

·移动优先

5、自定义可重用CSS组件

与其依赖大型的CSS框架(如Bootstrap)，不如创建自己的模块化，可重用的CSS组件以在项目中使用。如果您构建自己的定制设计，则无需导入完整的库。您创建只需要特定UI的组件。的新趋势最近还出现了有助于更有效地编写CSS代码的代码。如果你已经了解CSS，那么您无需在学习Saas上花费很多精力。Saas是CSS预处理程序，可为标准CSS添加更多功能并使其更加高效。你可以使用变量，嵌套，条件语句来减少CSS的重复并提高其效率。你还可以为每个可重用组件创建单独的Saas文件。Sass确实节省了很多时间，所以你绝对应该在2020年学习它。

6、CSS框架

学习CSS框架的普及程度不如去年，但对于不擅长设计的开发人员而言，仍然非常相关或有用。有许多流行的CSS框架可供使用，其中一些如下。

·Bootstrap是最流行的CSS框架。学习引导程序也有助于学习其他框架。

·Tailwind

CSS是其他正在流行的框架，与其他框架几乎没有什么不同。它是一组实用程序类，因此您可以创建自己的按钮和其他看起来与其他按钮确实不同的东西。它们也是高度可定制的。

·物化

·布尔玛

7、前端必须语言：JavaScript

学习HTML和CSS之后，接下来需要学习的是Vanilla

Javascript。对开发人员来说，掌握javascript基本知识非常重要。您将在服务器端语言(例如PHP，Python或#)中使用大量javascript，并且如果您想与React，Angular，NodeJS，Vue或任何其他javascript框架或库一起使用，则非常需要学习这种语言。以下是你应该在javascript中涵盖的一些重要主题

·JavaScript基础知识(变量，数据类型，函数，条件等)

·DOM(文档对象模型)

·JSON(JavaScript对象表示法)

·提取API(请求/响应/Ajax)

·如果您想转向React，Vue，Angular或其他框架，现代JS(ES6)概念对于学习非常重要。

8、一些重要工具

Web开发中将使用一些工具。这些工具将帮助你进行调试，提高生产率，管理代码，与其他开发人员合作以及类似的东西。让我们讨论其中一些工具。

·

Git(版本控制)和Github是您肯定会在2020年学习的最受欢迎的工具。Git在与其他开发人员协作和管理代码方面有很多帮助。您还可以选择其他一些选项，例如GitLab，Bitbucket和其他一些选项。

·

了解如何使用浏览器开发工具。无论是chrome还是firefox，您都应该知道如何使用不同的选项卡，例如元素选项卡，javascript控制台，用于请求和响应的网络选项卡，应用程序选项卡以及其他用于不同目的的选项卡。

·大多数IDE或文本编辑器都具有添加扩展名或插件的功能，这对提高生产力和构建Web应用程序非常有帮助。例如，Visual

Studio代码中的VSCode扩展可帮助下载扩展，例如实时服务器或实时saas编译器以与React一起使用。

·Emmet是另一个很棒的工具，它允许您编写非常快速的HTML和CSS，这有助于提高开发人员的生产力。

·

学习使用javascript软件包管理器，例如NPM和Yarn。如果您正在使用Javascript框架或库(例如React)，那么这些软件包管理器将使用很多，但是对于其他语言(例如Python或Php)，您将使用不同的软件包管理器。

·

如果要在前端安装NPM软件包，则必须使用Webpack或Parcel。如果要创建自己的模块，或者要将一个javascript文件带到另一个javascript文件，则默认情况下不能仅使用浏览器来执行此操作，因此需要Webpack或Parcel对其进行捆绑。

9、基本部署

此时，一旦你知道应该为前端开发学习什么工具或技术，就需要知道如何在Internet上部署前端网站。如果你正在为小型企业构建一些小型应用程序，登录页面或个人站点，则无需学习AWS或DevOps，仅因为它们具有光泽和新潮。你将使事情变得更加复杂而不是简单。你需要在2020年学习一些部署工具和步骤。

·域注册(Namecheap，Google等)

·托管托管(InMotion，Hostgator，Bluehost等)

·静态主机(Netlify，Github页面)

·SSL证书。

·FTP，SFTP(文件传输协议)非常适合小型应用程序。

·SSH(安全外壳)，用于高级应用程序。

·CLI和Git。

到目前为止，我们讨论的任何工具，技术趋势或步骤都是前端开发的一部分。您尚不知道该框架，但可以为个人和小型企业构建网站，也可以构建适合移动设备的布局。您还可以使用到目前为止讨论的工具或技术来部署小型应用程序或项目。如果您想申请工作，那么学习一些前端框架(如React，Vue或Angular)将是很棒的。

10、前端框架和状态管理

框架使您可以进行更高级的前端开发。框架为您提供了许多优势，例如可重用的组件，更有条理的UI或页面交互。这对于协作更好，也有助于编写简洁的代码。另外，了解状态管理。每个框架都有不同的方法。以下是2020年的一些流行框架和状态管理器。

·React：React库是最流行的Web开发学习方法，与其他框架和库相比，它相当容易。React开发人员还有很多工作要做。您可以将Redux和

ContextAPI与Hooks一起使用以进行状态管理。

·Vue：

Vue也越来越受欢迎，开发人员也更喜欢学习Vue。与React和Angular相比，Vue最容易学习。VueX是为视图而构建的状态管理器。

·Angular：此框架通常在大型组织中使用。它具有相当陡峭的学习曲线。用Angular学习

TypeScript也很好。它允许您使用可选的静态类型并支持ES2015的功能。NGRX和Services是可以学习此框架的良好状态管理器。

可选学习：

·

如果您具有这三个框架之一的知识，那么您还可以使用Svelte，它是一个JavaScript编译器，可让您生成纯净的原始JS代码并帮助您轻松构建用户界面。

·

了解服务器端渲染。NextJS(React)和NuxtJS(Vue)是允许您在服务器上运行React和Vue的框架。两者都有很好的功能，例如更好的SEO，文件系统路由，自动代码拆分，静态导出，JS中的CSS和许多其他功能。

·静态网站生成器：Gatsby(反应式)和Gridsome(Vue)

我们已经讨论了所有大多数前端开发工具和技术。现在让我们讨论成为后端开发人员或全栈开发人员的语言和技术。

11、服务器端语言(选择一种)

您应该至少了解一种服务器端语言。要在2020年选择一种语言，下面提供了一些选项

·NodeJS(不是语言，而是运行时环境)

·Python(非常适合初学者)

·Java(适合大型组织)

·Php(适合自由职业)

·Ruby(2020年少两极)

·C#

·Go

注意：无论你喜欢学习哪种服务器端语言，都要确保你了解使用该语言的数据结构和算法。数据结构和算法将帮助您为用户呈现数据，并将帮助您优化Web应用程序中的代码。我们特别建议您专注于使用数组和字符串(最重要)。你将同时使用这两种方法。

12、服务器端框架(选择一项)

一旦学习了自己选择的一种服务器端语言，就可以使用其中一种语言框架。您可以选择以下给出的选项之一

·Nodejs_Express，Koa，Adonis，Featherjs，Nestjs

·Python：Django，Flask，

·Java：SpringMVC，Grails

·PHP：Laravel，Symfony，Codeignitor，Slim

·Ruby：Sinatra上的RubyonRails

·C#：ASPNETMVC

·Go：Revel

13、数据库(选择一项)

大多数Web应用程序都需要一个存储数据的地方。在某些情况下，某些技术或某些语言可以与某些数据库配合使用。例如：在Mern堆栈中，M代表MongoDB，而在LAMP堆栈中M代表MySQL，但完全取决于您要为应用程序选择哪个数据库。我们将讨论2020年一些流行的数据库。

·关系数据库：RDBMS仍然是最受欢迎的数据库。最喜欢使用PostgreSQL，MySQL，MSSQL。

·NoSQL：MongoDB，RethinkDB，CouchDB

·云数据库：Firebase，AzureCouldDB，AWS

·轻量级和缓存：Redis，SQLlite，NeDB

在学习数据库时，您还将学习RDBMS，ORM(对象关系映射器)或ODM(对象数据映射器)的SQL(结构化查询语言)。GraphQL

：(可选)您可以了解现在流行的GraphQL。这是API的查询语言。它具有类似于JSON的简单语法，并且相当容易实现。

14、CMS：内容管理

您绝对应该了解内容管理系统，尤其是如果您是自由职业者。CMS用于将内容添加到您的网站或应用程序。客户能够更新自己的内容非常好。

·

传统CMS：WordPress(PHP)，Drupal(PHP)，Keystone(Javascript)，Enduro(Javascript)

·其他CMS：DEDECMS，帝国CMS，PHPcms，Prismicio，Strati。

15、部署和DevOps

托管全栈应用程序或后端应用程序比仅前端应用程序要复杂一些，尤其是当您拥有数据库时。确保您知道如何使用CLI进行部署。了解有关用于部署应用程序的以下内容。

在大多数公司中，有不同的团队从事DevOps的工作。因此，拥有有关DevOps的知识完全是可选的。您可以了解到，如果您正在从事自己的项目。

·SSH(安全外壳)

·Web服务器环境：NGINX，Apache

·应用程序托管：Linode，Heroku，AWS，Azure，Now。

·虚拟化：Docker，Vagrant

·测试：单元，功能，集成等

·负载平衡，监视，安全性。

以上所有技术工具都足以使您成为前端，后端或全栈开发人员。根据最终目标选择正确的工具和技术。

以上就是小编今天为大家分享的关于成为web前端开发工程师的学习指南的文章，希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助，想要了解更多web前端相关知识记得关注北大青鸟web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的web前端开发工程师。

英文|#/how-to-become-a-web-developer-in-2020-a-complete-guide/翻译|web前端开发(ID：web_qdkf)