成为Web前端开发工程师的入门指南

今天小编要跟大家分享的文章是关于成为Web前端开发工程师的入门指南。

经过如此多的试验和测试，而不是说你从头开始创建了所有内容，接着，你在网页上创建了第一个登录表单时，你感觉如何?经过了多次更改后，将布局分配给第一个Web应用程序时感觉如何?当成功处理了数千个用户的操作时，你感觉如何？

大多数Web开发人员都经历了上述所有阶段，最初可能会对其中某些感到沮丧，但是当他们看到自己的网站正在运行并且人们在世界各地使用它时，总体感觉确实令人兴奋和惊奇。

Web开发人员负责许多任务，从收集需求到设计网站，处理网站的后端部分，并使其成功地为用户服务。每年，行业中都会涌现出新技术和工具，以提高开发人员的工作效率，并为用户提供更好的网站。

对于他们来说，保持在Web开发游戏之上的挑战变得越来越大。今天，我们将讨论要在2020年成为Web开发人员的完整地图。这将是针对所有开发人员(前端，后端和全栈)的实用指南。

1、首先确定你的目标或道路我们将讨论很多技术，趋势和工具，但我们不希望您不知所措，因此你需要首先决定要成为一名Web开发人员要做什么，因为这将帮助你选择合适的工具。和学习技术。

成为Web开发人员的原因有很多，下面列出了一些选择因素：·你想作为一名Web开发人员在一家公司工作，这是最普遍的原因。·你想以自由开发人员的身份来开始自己的业务或代理。·你可以成为其他公司的顾问。

·你可以创建自己的应用来赚钱。·编码是你的业余爱好。从上述感兴趣或目标的领域，你可以选择适用于你的目标的正确工具和技术。如果你的目标是成为一名前端开发人员，则可以选择前端开发的工具和技术。

后端和全栈开发也是如此。2、Web开发的基本工具和软件·计算机和操作系统：如果没有计算机和操作系统，则无法编写代码。要学习Web开发，你不需要任何高端计算机(如果你拥有的话，那么更好)。

你可以使用任何类型的中型笔记本电脑或台式机。对于操作系统，可以使用适合你的MacOS，Windows(最新版本)或Linux。·文本编辑器/IDE：毫无疑问，VSCode适用于大多数情况和大多数语言。

它具有良好的性能，出色的扩展性，内置的终端功能以及大量功能。在2019年StackOverFlow调查中，VSCode也是开发人员的首选。

你还可以选择其他一些不错的选择，例如SublimeText或Atom。如果我们谈论IDE，那么是VisualStudio(#或C#)，Eclipse和Netbeans(Java)。是不错的选择。

·Web浏览器：大多数开发人员的首选是Chrome或Firefox。Chrome速度很快，并且使用V8引擎(JavaScript引擎)。

Firefox也取得了长足的进步，其中的一些好东西不在chrome浏览器中。两种浏览器都有出色的开发工具，可以对Web开发中的问题进行故障排除。·终端：您将使用一些系统命令来使用CLI进行很多工作。

您可以将默认或第三方终端用于您的Web开发项目。Bash，Zsh，Powershell，GitBash，iTerm，Hyper这些都是可以使用的选项。·设计(可选)：并不是每个人都需要学习。

在公司中，有专门的团队来制作图像，徽标或草图，但是如果您是自由职业者，则可能必须学习AdobeXD，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框架。学习引导程序也有助于学习其他框架。·TailwindCSS是其他正在流行的框架，与其他框架几乎没有什么不同。

它是一组实用程序类，因此您可以创建自己的按钮和其他看起来与其他按钮确实不同的东西。它们也是高度可定制的。

·物化·布尔玛7、前端必须语言：JavaScript学习HTML和CSS之后，接下来需要学习的是VanillaJavascript。对开发人员来说，掌握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应用程序非常有帮助。

例如，VisualStudio代码中的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、服务器端框架(选择一项)一旦学习了自己选择的一种服务器端语言，就可以使用其中一种语言框架。

您可以选择以下给出的选项之一...·Node.js_Express，Koa，Adonis，，·Python：Django，Flask，·Java：SpringMVC，Grails·PHP：Laravel，Symfony，Codeignitor，Slim·Ruby：Sinatra上的RubyonRails·C#：ASP.NETMVC·Go：Revel13、数据库(选择一项)大多数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，，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)。

谷歌人工智能写作项目：小发猫

Web前端开发工程师入门必备指南

今天小编要跟大家分享的文章是关于Web前端开发工程师入门必备指南typescript是用来干什么的，为什么要用typescript。

经过如此多的试验和测试，而不是说你从头开始创建了所有内容，接着，你在网页上创建了第一个登录表单时，你感觉如何?经过了多次更改后，将布局分配给第一个Web应用程序时感觉如何?当成功处理了数千个用户的操作时，你感觉如何？

大多数Web开发人员都经历了上述所有阶段，最初可能会对其中某些感到沮丧，但是当他们看到自己的网站正在运行并且人们在世界各地使用它时，总体感觉确实令人兴奋和惊奇。

Web开发人员负责许多任务，从收集需求到设计网站，处理网站的后端部分，并使其成功地为用户服务。每年，行业中都会涌现出新技术和工具，以提高开发人员的工作效率，并为用户提供更好的网站。

对于他们来说，保持在Web开发游戏之上的挑战变得越来越大。今天，我们将讨论要在2020年成为Web开发人员的完整地图。这将是针对所有开发人员(前端，后端和全栈)的实用指南。

下面来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。

1、首先确定你的目标或道路我们将讨论很多技术，趋势和工具，但我们不希望您不知所措，因此你需要首先决定要成为一名Web开发人员要做什么，因为这将帮助你选择合适的工具。和学习技术。

成为Web开发人员的原因有很多，下面列出了一些选择因素：·你想作为一名Web开发人员在一家公司工作，这是最普遍的原因。·你想以自由开发人员的身份来开始自己的业务或代理。·你可以成为其他公司的顾问。

·你可以创建自己的应用来赚钱。·编码是你的业余爱好。从上述感兴趣或目标的领域，你可以选择适用于你的目标的正确工具和技术。如果你的目标是成为一名前端开发人员，则可以选择前端开发的工具和技术。

后端和全栈开发也是如此。2、Web开发的基本工具和软件·计算机和操作系统：如果没有计算机和操作系统，则无法编写代码。要学习Web开发，你不需要任何高端计算机(如果你拥有的话，那么更好)。

你可以使用任何类型的中型笔记本电脑或台式机。对于操作系统，可以使用适合你的MacOS，Windows(最新版本)或Linux。·文本编辑器/IDE：毫无疑问，VSCode适用于大多数情况和大多数语言。

它具有良好的性能，出色的扩展性，内置的终端功能以及大量功能。在2019年StackOverFlow调查中，VSCode也是开发人员的首选。

你还可以选择其他一些不错的选择，例如SublimeText或Atom。如果我们谈论IDE，那么是VisualStudio(#或C#)，Eclipse和Netbeans(Java)。是不错的选择。

·Web浏览器：大多数开发人员的首选是Chrome或Firefox。Chrome速度很快，并且使用V8引擎(JavaScript引擎)。

Firefox也取得了长足的进步，其中的一些好东西不在chrome浏览器中。两种浏览器都有出色的开发工具，可以对Web开发中的问题进行故障排除。·终端：您将使用一些系统命令来使用CLI进行很多工作。

您可以将默认或第三方终端用于您的Web开发项目。Bash，Zsh，Powershell，GitBash，iTerm，Hyper这些都是可以使用的选项。·设计(可选)：并不是每个人都需要学习。

在公司中，有专门的团队来制作图像，徽标或草图，但是如果您是自由职业者，则可能必须学习AdobeXD，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框架。学习引导程序也有助于学习其他框架。·TailwindCSS是其他正在流行的框架，与其他框架几乎没有什么不同。

它是一组实用程序类，因此您可以创建自己的按钮和其他看起来与其他按钮确实不同的东西。它们也是高度可定制的。

·物化·布尔玛7、前端必须语言：JavaScript学习HTML和CSS之后，接下来需要学习的是VanillaJavascript。对开发人员来说，掌握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应用程序非常有帮助。

例如，VisualStudio代码中的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、服务器端框架(选择一项)一旦学习了自己选择的一种服务器端语言，就可以使用其中一种语言框架。

您可以选择以下给出的选项之一...·Node.js_Express，Koa，Adonis，，·Python：Django，Flask，·Java：SpringMVC，Grails·PHP：Laravel，Symfony，Codeignitor，Slim·Ruby：Sinatra上的RubyonRails·C#：ASP.NETMVC·Go：Revel13、数据库(选择一项)大多数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，，Strati。

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

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

·SSH(安全外壳)·Web服务器环境：NGINX，Apache·应用程序托管：Linode，Heroku，AWS，Azure，Now。

·虚拟化：Docker，Vagrant·测试：单元，功能，集成等·负载平衡，监视，安全性。以上就是小编今天为大家分享的关于Web前端开发工程师入门必备指南。

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

想要了解更多Web前端相关知识记得关注北大青鸟Web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师！

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

使用vue2+Vuex+Router 重写饿了么点餐系统和 vue 插件简析

。

vue有自己的脚手架构建工具vue-cli,使用起来非常方便，使用webpack来集成各种开发便捷工具，比如：代码热更新，修改代码之后网页无刷新改变，对前端开发来说非常的方便PostCss，再也不用去管兼容性的问题了，只针对chrome写css代码，会自动编译生成支持多款浏览器的css代码Eslint，统一代码风格，规避低级错误，对于有代码洁癖的人来说是绝对的好东西，不过有些地方的代码校验有时候也挺麻烦的-.-bable，ES2015出来已经有一段时间了，但是不少浏览器还没有兼容ES6.有了bable，放心使用ES6语法，它会自动转义成ES5语法。

Stylus，类似于SASS/SCSS，但是可以不写{}和“：”，使用起来还是很方便的…除此之外，vue-cli已经使用node配置了一套本地服务器和安装命令等，本地运行和打包只需要一个命令就可以搞定，非常的方便开发vue非常好的融合了react的组件化思想和angular的指令思想。

一个vue的组件将HTML、CSS、JS代码写在一个文件里面，这样既方便编写，也方便管理和修改Axios在vue1.x的时候，vue的官方推荐HTTP请求工具是vue-resource，但是在vue2.0的时候将推荐工具改成了axios。

使用方式都差不多，但需要注意的是：接口返回的res并不直接是返回的数据，而是经过axios本身处理过的json对象。

真正的数据在里：(url).then((res)=>{=})Vuexvue提供了一个数据管理工具vuex，有点类似于angular中factory和service，可以进行数据上的通信。

比如存储一些公共变量或者是不同组件间的数据处理等。这个有一些高级用法在这里不细说，想要了解的可以去官方文档看，有中文版本。

复制代码conststore=newVuex.Store({state:{count:0},mutations:{increment(state){state.count++}}})(url).then((res)=>{=})复制代码Vue-Routervue-router是vue的路由系统，可以用来创建单页应用。

基本思想是在主页面中引入标签，然后定义路由，把router挂在到app上，然后把各个子页面渲染到view里面。

使用起来还是很方便的，跳转页面只需要('test')获取元素节点vue2.0废除了v-el指令，所有的节点指令修改为ref，然后通过ref来获取元素节点，如testcodethis.$ref.testHook组件间的通信一。

如果是和子组件通信，则使用ref就可以实现，如：codethis.$()//调用test子组件的add方法二。

使用emit来发送广播vue2提供了一套广播机制，即一边发送广播，一边接收广播来执行相应操作。

使用方法如下：比如想要给test组件发送一个“相加”广播:复制代码exportdefault{method:{click(){Vue.$emit('add',{})//第二个参数可作为传递数据传送到监听端口，不需要则传空对象}}}复制代码那么test组件中就需要监听，在created方法里写复制代码exportdefault{created(){Vue.$on('add',)},method:{add(){this.count++}}}。

转行做Web前端开发需要掌握哪些有用技术?

。

今天小编要跟大家分享的文章是关于转行做web前端开发需要掌握哪些有用技术?最近总是会看到后很多人会问，我现在想学习Web前端开发，该如何下手，学习路线是怎样的?今天这篇文章，我来说说我自己对前端学习的理解，并结合一些面试中会常问到的问题来谈谈，如何才能在前端坑中，爬的游刃有余?下面来和小编一起看一看吧！

一、基础首先前端的基础，相信大家闭着眼睛都能知道HTML+CSS+Javascript，但是它们的轻重缓急该如何去选择呢?我个人认为在学习优先级上HTML>CSS>Javsscript，之所以这么排并不是因为Javascript最不重要，而是因为HTML和CSS的学习上可以不用花太多时间，而且我觉得Javascript是前端一切学习的基础。

HTML与CSS可以在一起学习，因为HTML的标签只有配合CSS样式才能达成优美的页面效果，没有CSS的页面只能是很多年前的门户网站的样子。

随着HTML5和CSS3的普及，以及浏览器对它们的支持，越来多的产品都选择用HTML5开发，HTML5甚至可以直接作为一个前端开发方向。我觉得学习了HTML后，面对这样的问题，应该不会被难到。

1.cookie，localStorage，sessionStorage的区别2.HTML5新特性canvas标签3.浏览器缓存机制，各有什么优缺点?4.如何看待HTML5的一些新特性?我觉得学习了CSS之后，面对这样的问题，也应该不会被难到。

1.元素水平垂直居中的实现2.浏览器的几种盒模型3.行内元素与块级元素4.元素相对定位与绝对定位5.伪元素:before与::before差别以及用途我觉得学习了Javascript后，面对这样的问题，应该不会被难到。

1.常见的闭包问题，比如for循环内部执行输出函数2.this关键字输出问题3.常用的事件类型4.ajax建立过程，常用的状态码5.Javascript内存回收机制二、框架说到框架学习，如果说JS框架的话，相信很多人一定会脱口而出jQuery，这是很多当初进入前端开发领域一定会学习的内容，我也不例外。

但是现在我却并不会推荐把很多的时间放在学习jQuery上，因为如果你深入学习之后会发现，对于jQuery的使用已经变少了。下面我们细细来说。

针对HTML布局上，当然Bootstrap是不能少的，我们不用把每个类都研究的很透彻，但是对于常用的class一定要熟练使用。

针对字体图标库上，推荐使用font-awaresome，还有某宝图标库iconfont，都包含了非常实用的图标。

其实重点想说的是对于前端MVVM框架的学习，相信很多人都知道就是AngularJS，Vue，React。

那么针对这些新兴的框架，我们该如何学习呢?首先有一点，ES6是一定要去学习的，在Vue2.X，AngularJS2，React中都对ES6提供了原生的支持，以后很多新的特性肯定也会使用ES6的语法去编写。

§AngularJSAngularJS在由AngularJS1升级到AngularJS2以后，完全是一个新的东西，原来在AngularJS1中的controller，service，filter等内容在AngularJS2中都变成一个个的module，component。

所以如果还没学过AngularJS部分内容的同学可以直接选择学习AngularJS2。

但是需要注意的是AngularJS2是以Typescript语言编写的，所以对Typescript的学习就必不可少了。

§Vue个人认为Vue学习是相对来说成本比较低的框架，目前官方文档已经很详细，关于Vue全家桶的内容像Vue-resource，Vue-router，Vuex等越来越完善，而且在Github上开源是项目也有很多，可以很容易掌握。

§ReactReact采用了VirtualDOM这一个很独特的概念，提高了页面渲染的效率。

但是也是由于VirtualDOM的存在，在编程方式上，React和Vue,AngularJS稍有不同，如果习惯了Vue开发，可能还不太习惯React的开发。

在针对框架层面，在学习之后，应该能回答下面这些问题。

1.AngularJS和Vue的双向数据绑定的实现2.Vuex工作机制3.React的VirtualDOM基本实现，如何自己实现一个VirtualDOM算法三、模块化&组件化前端开发已经从原来的整体化开发发展到现在的模块化开发，甚至是组件化开发，开发过程愈发精细，讲求的是代码的可复用性。

以前一个页面从上到下一次编写的过程，现在已经发展为先将页面进行拆分成模块甚至是组件，不同的人关注不同的模块，组件，提高开发效率。

在模块化开发中，不得不提到CommonJS，AMD和CMD规范，并且有不同的实现，比如RequireJS。对于模块化编程的规范已经有很多的文章有讲到，可以认真去学习下。

四、构建工具前端开发是离不开构建工具的，自己写的代码如何打包压缩，ES6的代码如何编译成JS，Sass，less代码如何编译成原生CSS，这些都是构建工具去完成的。

有了构建工具，可以极大的提高我们的开发速度，这里不得不提到的就是gulp+webpack。

gulp是一种任务驱动型的构建工具，通过管道处理数据流，提高了数据处理速度，而且其提供的一系列插件也很方便使用。

而webpack的作用就是把所有浏览器端需要发布的静态资源做相应的准备，比如资源的解析、合并和打包，它提供了强大的加载器和插件机制，例如vue-loader提供了对vue的支持，babel-loader提供了对ES6的支持。

其他的构架工具还有工程化构建的Yeoman，Slush，FIS等。在学习了常用的构建工具后，应该可以回答出下面的问题。

1.Gulp和Webpack的不同2.Webpack打包速度比较慢，可能原因是什么?有没有什么解决办法?五、全栈前端开发到最后就是要走全栈开发的道路了，全栈开发以NodeJS作为服务端语言，基于NodeJS实现的服务端框架有Express，KOA，目前也发展的越来越成熟。

既然讲到全栈开发，肯定会通过服务端语言操纵数据库，因此对于数据库的知识也肯定要掌握的。

以上就是小编今天为大家分享的关于转行做web前端开发需要掌握哪些有用技术的文章，希望本篇文章能够对正在从事web前端学习的小伙伴们有所帮助。

想要了解更多web前端相关知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利，成为一名优秀的web前端开发工程师！

为什么学习Vue框架？？

vue框架算是最近前端开发很好的工具。可以突破以前所没有实时更新页面。很有发展前景，很多大公司现在正在使用。

Vue框架诞生于2014年，其作者为中国人——尤雨溪，也是新人最容易入手的框架之一，不同于React和Angular,其中文文档也便于大家阅读和学习。

Vue用于构建交互式的Web界面的库，是一个构建数据驱动的Web界面渐进式框架，该框架遵循CMD规范，并且提供的设计模式为MVVM模式（Model->View->View-Model）和一个可组合的组合型组件系统，具有简单的、灵活的API(接口)。

该框架继承了React的虚拟DOM技术和Angular的双向数据绑定技术，是一款较新的功能性框架。

在这里介绍下什么是虚拟DOM和双向数据绑定：1、虚拟DOM（VirtualDOM），顾名思义，从字面上理解就是虚构的DOM树，当我们用传统的原生API或者jQuery去操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。

即使计算机硬件一直在更新迭代，但是操作真实DOM的代价仍旧很昂贵，真实的DOM节点，哪怕是一个最简单的div也包含很多属性，所以频繁的操作，会导致页面卡顿，影响用户的体验。

为了解决这个浏览器性能问题，虚拟DOM（VirtualDOM）就被设计出来了，其核心算法是Diff算法。

它会将一次操作过程中对真实DOM所有更新的diff内容保存到本地的一个js对象中，最终将这个js对象一次性attach到DOM树上，通知浏览器去执行绘制工作，避免了大量的无谓的计算量。

用js对象模拟DOM节点的好处是：页面的更新可以先全部反应在js对象上，操作内存中的js对象的速度明显要快的多。等更新完成后，在将最终的js对象映射成真实的DOM，交由浏览器去绘制。

（提高了性能，并且运行速度快）2、双向数据绑定，在讲双向数据绑定前，我们要想说下单向数据绑定，单向数据绑定，就是把Model绑定到View上，当我们用JavaScript代码更新Model时，View就会自动更新了（Model-->View）。

那么双向数据绑定就是，用户更新了View，Model的数据也会自动被更新（ModelView）。什么情况下用户可以更新View呢？

举个最直接的例子，填写表单，当用户填写表单时，View的状态就被更新了，如果此时MVVM框架可以自动更新Model的状态，那么就相当于我们把Model和View做了双向数据绑定。

其原理是我们要对input进行value的属性绑定（v-bind：value=”...”）将Model中的变量绑定到View上（Model->View）以及当用户对input进行操作时，进行事件监听（v-on：input=”...”）将View上的更新传回Model中（View->Model）从而实现双向数据绑定，在Vue中，以上操作过于繁琐，便提供了v-model直接实现双向数据绑定的效果。

在进行Vue项目开发过程中，我们可以通过script标签引入式写法来引入vue或者是nodejs自带的包管理工具npm安装vue。

并且通过newVue（）进行新建一个Vue的实例对象，其下有很多属性，包括el、data、methods、computed、watch等等，el为指向页面的节点元素，data存储数据，数据类型包括simpledatatype（简单数据类型）以及complexdatatype（复杂数据类型），用插值表达式{{}}显示，在插值显示的时候，不需要写上data，methods内存储方法，通过fn（）的形式调用方法，computed内存储也是方法，但是其为计算数据，复杂逻辑的应该存储在computed中，计算属性是基于它们的依赖进行缓存的，由于computed带有一层缓存，所以只有在它的相关依赖发生改变时才会重新运行，而methods则是调用一次生成一次，computed中的方法调用时不需要加（）的，watch为监听，监控，监听data中的属性值也可以监控对象，存在两个参数（currentValue当前值和prevValue之前值）。

在vue中如何根据后台返回的数据动态的改变css文件的引入路径

。

可以使用一个用来引入css文件的组件                    export default {        data () {            return {                theme: 'your-custom-theme'            }        }    }注：以上代码没有经过测试，纯理论指导。

应该没问题。还有更高级一点的用法是通过vuex状态管理，篇幅比较大，这里不敲这么多代码，反正道理是一样的。