前端工作的前景如何？（新手适合建立什么样的网站？）

前端工作的前景如何？

前端开发趋势一直都是热度高且变化快。因此，对于前端开发者来说，想要跟上这些不断变化的趋势，需要耗费巨大的精力。至于2022年前端技术具体会发生哪些变化，让我们一起来聊聊吧。

成都创新互联公司服务项目包括茂名网站建设、茂名网站制作、茂名网页制作以及茂名网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，茂名网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到茂名省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

1、前端介绍

前端，也称为“客户端开发”，简单来说，你可以在应用程序或网站的屏幕上看到的所有内容都属于前端。

让我们考虑一个现实的例子：你正在访问的网站。内容设计、图像、段落和线条之间的间距，左上角的公司徽标，以及右下角的小通知按钮——所有这一切都是前端。

2、前端技术包括哪些？

前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。

2.1、HTML

掌握HTML是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。因此，它是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言，学好HTML是成为Web前端开发人员的基本条件。

HTML是一种标记语言，能够实现Web页面并在浏览器中显示。HTML5作为HTML的最新版本，引入了多项新技术，大大增强了对于应用的支持能力，使得Web技术不再局限于呈现网页内容。

随着CSS、JavaScript、Flash等技术的发展，Web对于应用的处理能力逐渐增强，用户浏览网页的体验已经有了较大的改善。不过HTML5中的几项新技术实现了质的突破，使得Web技术首次被认为能够接近于本地原生应用技术，开发Web应用真正成为开发者的一个选择。

HTML5可以使开发者的工作大大简化，理论上单次开发就可以在不同平台借助浏览器运行，降低开发的成本，这也是产业界普遍认为HTML5技术的主要优点之一。AppMobi、摩托罗拉、Sencha、Appcelerator等公司均已推出了较为成熟的开发工具，支持HTML5应用的发展。

2.2、CSS

学好CSS是网页外观的重要一点，CSS可以帮助把网页外观做得更加美观。

2.3、JavaScript

学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。

2.4、Bootstrap

主流框架之一，Bootstrap 是基于 HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷。

2.5、html5-boilerplate

该框架可以快速构建健壮，且适应力强的web app或网站。

2.6、Meteor

Meteor是新一代的开发即时web应用的开源框架，它能在较短时间内完成开发。

2.7、Semantic UI

基于自然语言有效原则的UI组件框架。

2.8、Amaze UI

国内首个开源HTML5跨屏前端框架产品系列，中文排版支持更优、本土化组件丰富。该产品系列中有专门针对移动端的HTML5混合应用开发框架Amaze UI Touch以及针对跨屏HTML5网页开发的Amaze UI Web。其中，Amaze UI Touch可以帮助开发者通过丰富的组件，快速构建出与原生APP相媲美的专属移动端的HTML5应用。

3、2022年前端技术领域变化

3.1、Web组件化

基本上这就是未来。为什么？因为这些纯Web组件与框架无关，并且可以在没有框架或没有任何框架拼写标准化的情况下工作。因为它们没有JS疲劳，并且得到了现代浏览器的支持。因为它们的文件大小和消耗将是最佳的，并且VDOM渲染令人赞叹。

这些组件提供了Custom Element，这是一个Javascript API，可让你定义新html标签，HTML模板以指定布局，当然还有Shadow DOM，它本质上是特定于组件的。在这个领域中知名的工具是Lit-html（和Lit-element），StencilJS，SvelteJS，当然还有Bit，它们是可重用的模块化组件，可以在任何地方直接共享，使用和开发。考虑组件开发时代的未来，以及模块化，可重用性，封装和标准化的原理，Web组件就是答案。

3.2、微前端

Serverless即“无服务器”架构，它试图帮助开发者摆脱运行后端应用程序所需的服务器设备的设置和管理工作，它由第三方云计算供应商负责后端基础结构的维护，同时以服务的，例如数据库、消息、身份验证等。

微前端的概念类似于微服务，它将前端应用拆分成一个个更小的更简单的能够独立开发、测试、部署的小块，在用户看来它依旧是一个独立的产品。前端业务在发展到一定规模后，需要一种能将业务化繁为简的架构。常用的微前端解决方案有single-spa、qiankun。

微前端、Serverless目前都未出现大规模应用的情况，各大公司对此都处于探索阶段，两项技术稳步发展，期待未来大规模的应用。

3.3、微设计

布拉德·弗罗斯特（Brad Frost）提出的理论将Web应用程序的构成与原子，分子，有机体等的自然构成进行了比较，最后以具体的Web页面作为结尾。原子由分子组成（例如，文本输入+按钮+标签原子=搜索分子）。分子组成生物体。有机于布局模板中，该模板可以具体化为交付给用户的页面。

Atomic组件的优势不只是通过模块化和可重用的组件来构建模块化UI应用程序。这种范例迫使你思考组成每个组件的角色和API。

3.4、Web组装

Web程序集将语言多样性带入Web开发中，以弥补JavaScript创建的空白。它被定义为“基于堆栈的虚拟机的二进制指令格式。Wasm被设计为可移植目标，用于编译高级语言（如C/C ++/Rust），从而可以在Web上为客户端和服务器应用程序进行部署。”

埃里克·埃利奥特在他的文章中优雅地概述了该概念的好处：在wasm中实现对性能至关重要的内容，并将其像标准JavaScript模块一样导入。一种新语言：WebAssembly代码定义了以二进制格式表示的AST（抽象语法树）。您可以编写和调试文本格式，以便于阅读。对浏览器的改进：浏览器将理解二进制格式，这意味着我们将能够编译二进制包，压缩后的二进制包小于我们今天使用的文本JavaScript。较小的有效载荷意味着更快的传递。根据编译时的优化机会，WebAssembly的运行速度可能比JavaScript快！

3.5、封装样式和Shadow Dom

组件的一个重要方面是封装-能够使标记结构，样式和行为保持隐藏状态，并与页面上的其他代码分开，以使不同部分不会，并且代码可以保持整洁。Shadow DOM API是其中的关键部分，它提供了一种将隐藏的单独DOM附加到元素的方法。Shadow DOM实际上已经被浏览器使用了很长时间了。您可以将影子DOM视为“ DOM中的DOM”。它是自己的隔离DOM树，具有自己的元素和样式，与原始DOM完全隔离。

它允许将隐藏的DOM树附加到常规DOM树中的元素上。该阴影DOM树以影子根开头，可以与普通DOM相同的。这样做的主要目的是，我们不需要为类使用名称空间，因为不存在名称或样式溢出的风险。这就是Web组件样式进行真正封装的解决方案。

3.6、TypeScript接管前端

最近的每次交谈都听起来好像TS正在接管前端开发。据报道，有80％的开发人员承认他们想在下一个项目中使用或学习TypeScript。尽管有缺点，但TS代码更易于理解，实现更快，产生的错误更少。想重构你的React应用程序并与TS一起使用吗？去吧。想逐步开始吗？使用Bit之类的工具逐步将你的应用程序中的组件重构为TS，并使用React-Typescript编译器独立于应用程序构建它们。

TypeScript，它是有类型定义的 JavaScript 的超集，包括 ES5、ES5+ 和其他一些诸如反射、泛型、类型定义、命名空间等特征的集合，为了大规模 JavaScript 应用开发而生。复杂软件需要用复杂的设计，面向对象就是一种很好的设计，使用 TypeScript 的一大好处就是 TypeScript 提供了业界认可的类（ ES5+ 也支持）、泛型、封装、接口面向对象设计能力，以提升 JavaScript 的面向对象设计能力。市面上的框架也对 TypeScript 提供了非常好的支持。

React 对.tsx 支持非常好，比如我在 Midway controller 里支持 tsx 写法，这是非常大胆的，对于后面 react ssr 来说是一个极利；Vue 从 v2.5.0 之后对 ts 支持就非常好；Node.js Web 框架，尤其是 Egg.js 对 ts 支持非常好，当然还有更高级更专注的的 Midway 框架，Midway 基于 Egg 生态，同时提供 IoC 等高级玩法；

在使用 Webpack 编译前端应用式，通过 TypeScript-loader 可以很轻松地将 TypeScript 引入到 Webpack 中。有了 TypeScript-loader，就可以一边使用 TypeScript 编写新代码，一边零碎地更新老代码。毕竟 ts 是 js 超集，你有空就改，非强制，特别包容。

3.7、从组件库到动态集合

组件开发的出现催生出了一种工具的产生，它就是Bit，以及其托管平台Bit.dev。使用Bit来连续隔离现有组件并将其导出到动态可重用的共享集合中，而无需努力构建麻烦且高度耦合的组件库。使用Bit，你可以独立隔离，版本控制，构建，测试和更新UI组件。它简化了在现有应用程序中隔离组件，将其收集到远程集合并在任何地方使用的过程。

每个组件都可以在任何项目之外构建，测试和渲染。你可以更新单个组件（及其相关组件），而不是整个应用程序。在bit.dev平台中（或在你自己的服务器上），可以为不同的团队远程托管和组织组件，以便每个团队都可以控制自己的组件开发。每个团队都可以共享和重用组件，但又保持其独立性和控制力。

该平台还提供了共享组件的多合一生态系统：它自动记录UI组件的文档，在交互式中渲染组件，甚至提供内置注册表以使用npm安装组件。此外，你可以在任何存储库中导入组件并进行修改。在短期内，这以与Spotify/iTunes更改以前通过静态CD音乐专辑共享音乐的过程类似的，彻底改变了共享和组成组件的过程。这是一个动态的模块化解决方案，每个人都可以共享和使用组件。从长远来看，Bit有助于微前端的开发。主要是因为它已经可以让你独立版本，测试，构建和更新UI应用程序的各个部分。

3.8、设计与开发的整合

随着组件驱动设计系统的兴起，使产品和团队之间的UI一致，新工具应运而生，弥合了设计师和开发人员之间的鸿沟。但是，这不是简单的任务。尽管代码本身实际上是唯一的真理源（这是用户真正得到的），但是大多数工具都试图弥合设计者与设计者之间的鸿沟。在此类别中，您可以找到成帧器，Figma，Invision DSM等。在开发人员的末端，你可以看到Bit.dev之类的平台如何托管下一代组件库并帮助建立共享组件的采用范围。

该平台为您的实际源代码提供了呈现的可视化效果，以便设计人员可以与开发人员合作，并以可视化。要注意的另一个有前途的想法是设计令牌。将令牌放置在代码中，设计人员可以通过它们直接与外部协作工具真正控制简单的样式方面（例如颜色）。与Bit.dev等平台集成后，可以创建比以往更紧密的工作流程。

3.9、跨端开发框架迅猛发展

从最初的React Native，到后来的Flutter，electron，跨端的解决方案受到了大量前端工程师的关注和学习。

Flutter2的发布，其Web开发能力也过度到了稳定版本，同时桌面端开发能力也进入了beta阶段，进一步提高了代码的复用性，同时它也拓展了很多IOS的功能，生态进一步壮大。近乎一套代码便可以完成移动端、web端、桌面端应用的开发，大大缩减开发人员学习其他平台开发技术的成本，一线互联网公司也在将其部分应用使用Flutter进行重构。

electron作为一个基于Nodejsde桌面端跨端开发框架，深受大厂的喜爱，飞书、vscode、twitch等均是基于electron进行开发。跨平台也让 Electron 可同时开发 Web 应用和桌面应用，无论是 UI，还是代码，很多资源都可以共享，大幅减少了开发者的工作量。

需求推动着跨端框架的发展，无论从成本还是效率考虑，跨端开发都将成为前端开发未来的发展方向之一，其生态也会迎来疯狂扩张。

3.10、低代码平台持续发展

随着十四五规划的推出，进一步推动了企业数字化转型的步伐，众多企业面临数字化转型。相较于培养一支开发团队，多数企业更倾向于使用低代码平台，通过无编码或低编码的。同时，低代码平台迎来了爆发式的增长，至今仍将保持50%的平稳增速。平台快速发展，覆盖的业务场景也逐渐增多，中小企业95%以上的场景可通过低代码平台搭建，中大型企业的覆盖率也能达到70%。

低代码平台的迅猛发展，很多业务场景的开发工作逐渐被平台替代，很多简单的前端页面的开发都会转移到平台中完成，初级前端工程师的生存重建逐渐被蚕食。同时低代码平台的发展也会对前端工程师提出了更高的要求。

4、总结

前端开发趋势一直都是热度高且变化快。因此，对于前端开发者来说，想要跟上这些不断变化的趋势，需要耗费巨大的精力。至于2022年前端技术具体会发生哪些变化，让我们拭目以待吧。

本文分享自华为云社区《2022前端技术领域会有哪些新的变化》，作者：架构师李肯。

新手适合建立什么样的网站？

1、如果只会html、js技术，那可以搭建静态网站，比如公司官网。这种网站不需要太多的技术，但是要懂前段开发的知识，要不然网站页面做的很丑。

2、如果会PHP、JAVA等后端语言，那可以搭建站了，是新手的话可以搭建简单点的，逻辑不要太复杂，比如：文章系统、产品宣传页等。

建议新手多做项目，只有多做才能成为老手。

希望我的回答能帮助到你，谢谢。

怎么上传到服务器上线啊？

首先你要打开阿里云

登录阿里云

进入控制台

选择你开通的网站服务，点击管理，出来站点信息页面，账号信息项目下有FTP用户名和密码，不知道密码点击重置密码，修改密码，后面还有FTP主机地址，这个地址就是你上传网页的地址，在浏览器地址栏输入FTP地址，输入FTP的账户和密码你就可以直接把本地的网页文件拖入里面等上传完就可以了。

要想用域名访问你的站点空间需要把域名和空间IP绑定，在域名注册商后台把域名解析的A类地址绑定为网站空间的IP地址，然后在阿里云后台域名绑定了输入你的域名，这一步域名指向你的空间服务就完成了。

随后你可以把你的域名发布给大家，别人输入你给的域名就可以直接打开你设计的网站了。

如何在电脑上搭建网页？

对于网络来说，是目前很重要的一个工具，尤其是目前面对互联网时代，大家都是想把传统的一些生意搬到网上进行，比如购物目前就成功逆袭，使得实体店生意越来越冷清，很多小伙伴觉得自己的东西很有价值，能否在在电脑上搭载网页，供别人下载？方法比较多，这类方法最简单，一起来看一下：

建网站实际上是程序员的一项基本技能，其实就是和我们平时说的建一个网站，让别人下载东西是一样的，只不过你这个是属于内网的网站，这样连域名都省了，更简单一些。

建内网的思路和流程是什么？

首先，把局域网（以下简称内网）中一台电脑作网站服务器，随便哪一台都行，要求不高；然后利用第三方PHP搭建工具，实现web环境服务；利用网站源码直接建网站；去网上找下载类的单页面文件；利用网站源码自带后台修改内容；利用记事本或者其它第三方工具修改网页内容；完成后使用内网其它电脑访问下载测试。

选择源码

选择源码的目的就是为了搭建环境，而这个环境是和网站源码一一对应的。这两款源码，都是网站主流的并且非常火的两软件源码软件。

wordpress是非常简单方便的，而且是全免费的，适合个人制作网站，模版也非常多，基本上5分种就可以搞好。而且题主的要求就比较简单，只需要一个下载的网页就行，可以找一个下载类的模版，应用就可以了。接下来直接修改里面的软件名称，软件介绍，下载地址等，当这些完成后，下载网站就做好了。

discuz则是国产的源码，全免费，不过里面的模版和插件以收费的居多。但是中文的，插件也丰富，可以让网站实现各种功能。我在今年期间，把我的网站改版了，采用的就是这个源码，虽然它收费的东西多，但关键是功能也多，比较灵活，有点像DIY电脑的感觉。由于它是论坛源码，虽说有模版，但最终还是个论坛源码。设置也比较复杂，不太适合新手。

搭建环境

一般来说，如果是公司专门用一台电脑做网站服务器，我们是要装windows server 2012或2008服务器系统的，然后利用它自带的WEB服务就行。

修改网站内容

网站是建好了，但不是我们想要的界面，这时我们就需要给它选择模版或者进行更改，模版对界面起决定性作用。如题主需要做的是下载类型的网站，我们就可以选择对应下载类的模版，然后启用这个模版，一个下载类的网站就出现了。这时我们只需要改改里面的软件名称，介绍及下载地址就可以了。

做网站其实并不难，但步骤有点多，而且如果这个网站要对外公开的，还需要注册域名，备案，购买服务器等，简单并复杂着，对于新手来说，想成功建立好网站，需要花费大量的时间，静下心，慢慢研究。对此大家怎么看？

这个是可以实现的，它其实就是和我们平时说的建一个网站，让别人**东西是一样的，只不过你这个是属于内网的网站，这样连域名都省了，更简单一些。先给大家看下我自己制作的网站，关于其中**的某个界面的截图：

先来说下内网建一个下载的网站或网页的思路（流程）1，把局域网（以下简称内网）中一台电脑做为网站服务器，随便哪一台都行，要求不高；

2，利用第三方PHP搭建工具，实现web环境服务；（就是让这台电脑成功网站服务器）

3-1，利用网站源码直接建网站；（方法一）

3-2，去网上找下载类的单页面文件；（方法二）

4-1，利用网站源码自带后台修改内容；（对应方法一）

4-2，利用记事本或者其它第三方工具修改网页内容；（对应方法二）

5，完成（使用内网其它电脑访问下载测试）

源码的选择为什么要首先选择源码呢？因为，我们第一步就要搭建环境，而这个环境是和网站源码一一对应的。在这里给大家介绍两款源码，都是网站主流的并且非常火的两软件源码软件。

1，wordpress

我最开始就是用的这个源码，非常简单方便，而且是全免费的，适合个人制作网站，模版也非常多，基本上5分种就可以搞好。而且题主的要求就比较简单，只需要一个下载的网页就行，可以找一个下载类的模版，应用就可以了。接下来直接修改里面的软件名称，软件介绍，下载地址等，当这些完成后，题主的下载网站就做好了。

2，discuz

国产的源码，全免费，不过里面的模版和插件以收费的居多。但是中文的，插件也丰富，可以让网站实现各种功能。我在今年期间，把我的网站改版了，采用的就是这个源码，虽然它收费的东西多，但关键是功能也多，比较灵活，有点像DIY电脑的感觉。

不过这个我不建议题主用，因为它是论坛源码，虽说有模版，但最终还是个论坛源码。设置也比较复杂，不太适合新手。所以做个人网站，小型网站还是建议使用第一个源码平台。我之所以换成这个，主要是为了和粉丝交流互动，论坛型的网站注重的就是交流互动。

搭建环境（WEB服务器）一般来说，如果是公司专门用一台电脑做网站服务器，我们是要装windows server 2012或2008服务器系统的，然后利用它自带的WEB服务就行。不过我们今天按题主的要求，做个简单的内网下载网站，我们直接用第三方的工具就可以了，更方法一些。今天我们用到的工具看图如下：

PHPstudy这个工具是免费的，大家可以网上去搜一下，它是有官网的，包括它的使用说明我在这里也不详细说了，大家看下官网的教程，按教程一步步来。官网的教程已经做得很好很简单了。

大家需要注意一下，如上图所示。在这个工具的安装目录中，有个www的文件夹，这个就是网站的根目录，也就是说，我们的源码的文件就是要复制到这个文件夹的。源码文件不是像我们exe文件一样，直接安装，它是不一样的。它的安装方法一般都是先把源码解压后，得到一个文件夹，然后打开这个文件夹，把里面所有的文件全部复制到www文件夹下，然后通过浏览器打开一个指定的网址，就可以出现安装界面了，这点大家要明白哦！

利用源码建立网站题主适合wordpress这个源码，所以这里以它为例。这里我大简要的说下，具体的安装步骤网上多的是，更详细的都可以找到。

上面我刚刚说了，下载好源码程序后，解压一下，然后把解压的文件夹里面的所有文件复制到PHPstudy的安装目录中的www文件夹里，然后在浏览器中输入你这台电脑的IP地址回车即可。如下图所示：（这里我直接发几张截图，具体看情况，有可能会有点不一样，但总体上是一样的）

为什么打开IP地址后，会出现安装界面呢？因为这个源码当你把文件全部复制到WWW文件夹后，这时你的WEB网站服务器已成功启动了，所以WWW目录就是对外的网站根目录。输入地址后，由于是第一次使用，源码会自动检测到你还没有安装，所以它就会出现安装界面。

当你安装完成后，再次输入IP地址时，它就不会出现安装界面了，而是出现你的网站界面，这样你的网站就基本上建立成功了，一个个人网站就诞生了！

修改网站内容网站是建好了，但不是我们想要的界面，这时我们就需要给它选择模版或者进行更改，模版对界面起决定性作用。如题主需要做的是下载类型的网站，我们就可以选择对应下载类的模版，然后启用这个模版，一个下载类的网站就出现了。这时我们只需要改改里面的软件名称，介绍及下载地址就OK了，是不是超简单！

关于模版及修改我这里只能给大家一个思路，因为这个不太好讲，很简单，但步骤有点多，网上教程也是很多，毕竟热门的东西相关的资料也多。我说几个重点，大家参考一下：

1，想要对网站进行更换模版或修改内容，前提是必需要进入后台修改。进入后台的地址是：你电脑的IP地址/wp-admin/

2，模版更换有两种方法，一种是直接在后台模版里直接选择，选择喜欢的模版直接点启用即可，非常简单。另一种就是去网上下载喜欢的模版，有些可能要钱的，然后把这个模版解压后，复制到源码文件中指定的文件夹内，然后去后台模版界面，这时就看到了这个模版了，选中它启用就行了。

3，有遇到任何问题，记得找百度哦！

下载网站完成最后，通过上面的步骤，题主的下载类网站就做好了，局域网用户只要在浏览器中输入你这台电脑的IP地址，就可以访问你的网站，进行文件下载。

总结：

做网站其实并不难，但步骤有点多，而且如果这个网站要对外公开的，还需要注册域名，备案，购买服务器等，简单并复杂着，对于新手来说，想成功建立好网站，需要花费大量的时间，静下心，慢慢玩。

讲到这里就要和大家说88了，上面有提到第二种源码discuz，刚好我的网站现在是这种源码做的，给大家展示一下，如果觉得不错，可以点个赞，只要想学，建一个和我一样的网站都是很简单的！

首页

下载中心，这个就是题主说的下载类网页，不过这个源码主要做成的就是论坛形式的，所以不太适合做下载类的网站。

以上就是我自己现在做的网站，因为采用的是上面提到的discuz源码做的，所以更多偏向于互动和交流。我最开始采用的是第一种源码，主要也是提供**的，不过后来慢慢发现，光**，无法交流，有些意见及反馈无法实现，所以后面一直想做一个论坛式的网站，但不完全是论坛，所以今天就改了，变成现在这个样子的。

分享文章：前端工作的前景如何？（新手适合建立什么样的网站？）
文章分享：http://www.mswzjz.cn/qtweb/news44/69144.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能